Guide to utilizing Vue and Arrays for creating conditions

In my HTML, I have the values XS, S, and M for all sizes in both Black and White. Additionally, I have a JSON object that shows the available sizes for each color.

I am looking to use v-if to conditionally display content when the size XS is not available in the array variant_selection.size, based on the value of variant_selection.option1. The sizes loaded as HTML include XS, S, and M.

For example:

 variant_selection: {
          option1: "Black",
          option2: "XS",
          size: [
          "Black / XS", /// Only black color has XS size
          "Black / S",
          "Black / M",
          "White / S",
          "White / M",
          ],
        },

I attempted this approach but it did not work for me. Can someone please assist?

<span v-if="'variant_selection.option1 / {{ value }}' !== 'variant_selection.size.includes(variant_selection.option1) / {{ value }}' ">.</span>
javascriptarraysvue.jssorting

Answer №1

<span v-if="variant_selection.size.includes(variant_selection.option1 + ' / ' + value)" ..

or

<span v-if="variant_selection.size.includes(`${variant_selection.option1} / ${value}`)" ..

Avoid using Mustaches {{}} in Vue for the v-if conditions

Find more information at Attribute Bindings

Mustaches should not be placed within HTML attributes. Instead, utilize a v-bind directive

Solution

const { createApp,ref } = Vue

const App = {
  setup() {
    const color = ref('')
    const colors = ['Black','White']
    const size = ref('')
    const sizes = ['XS','S', 'M']
    const selection =  {
          size: [
          "Black / XS", /// Only black color has XS size
          "Black / S",
          "Black / M",
          "White / S",
          "White / M",
          ]
    }
    return {
      color, colors, size, sizes, selection
    }
  }
}

const app = createApp(App)
app.mount('#app')
#app { line-height: 1.75; }
[v-cloak] { display: none; }
<div id="app" v-cloak>
  Color: <select v-model="color">
  <option v-for="c in colors">{{c}}</option>
  </select><br/>
  Size: <select v-model="size">
  <option v-for="s in sizes">{{s}}</option>
  </select><br/>
  Combination: {{ `${color} / ${size}` }}<br/>
  <span v-if="selection.size.includes(`${color} / ${size}` )">Combination is present</span>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Learn how you can swap out UI elements instead of simply appending new ones onto the existing interface. Discover the power of JavaScript, the Fetch API, and Dom

Currently, I am working on a small project to learn more about APIs and how to interact with them effectively. This project involves searching for and displaying characters from a TV show using data obtained from an API. My issue arises when I try to make ...

javascripthtmldomfetchcodepen

Is it possible to read JSON data from a POST request using Django DRF?

When attempting to send data via a jQuery POST request, I am able to access the data from both the JavaScript client side and the Python Django Rest Framework serializer create method on the backend. The console.log output is: { "wo_r": [ { " ...

javascriptjqueryjsondjangodjango-rest-framework

Set up a Bootstrap date picker to populate two input boxes with a start and end date. Additionally, disable the ability for the date value to change

In my project, I have implemented Bootstrap Datepicker to set two input boxes for selecting start and end dates. The rule is that the start date must be after today and the end date must be after the selected start date. To disable specific dates in the da ...

javascriptjqueryajaxtwitter-bootstrap-3

Surprising outcomes when using Mongoose

Questioning Unusual Behavior There is a model in question: //test.js var mongoose = require('../utils/mongoose'); var schema1 = new mongoose.Schema({ name: String }) var schema2 = new mongoose.Schema({ objectsArray: [schema1] }); schema1.pre( ...

javascriptnode.jsmongodbvalidationmongoose

Is there a way for me to display the multi-dimensional array on the console using a for-each loop?

Consider the following scenario with arrays: int [] array = new int[2]; If we run this code: for (int i: array){ System.out.println(i); }; We will see the output as 0 and 0, which is the expected behavior. But what if we want to work with a multi-dim ...

javaarraysmultidimensional-arrayforeach

Creating individual names for images fetched from a MySQL query using PHPIn PHP, find a way to assign

I have some PHP code below and I am trying to figure out how to give each image its own name so it can be selected in jQuery. PHP: $query=mysql_query($sql) or die(mysql_error()); while($list=mysql_fetch_array($query)){ print" <div class=&b ...

phpjavascriptjquerymysql

"Unexpected modifications occur when passing variables by reference in a PHP foreach loop

I can't seem to wrap my head around a strange issue. Here is the code snippet in question: function load_search_value($meta_query_array) { var_dump($meta_query_array); foreach($meta_query_array as &$query) { // change compare o ...

phparraysreferenceforeach

Verify the form specifications before transmitting data using ajax

I have been attempting to send form data as json to my device using XMLHttpRequest. My form consists of multiple required fields, and it should not be submitted if the mandatory fields are empty. However, even when a field is left empty, the form data ge ...

javascripthtmlajax

What is the method for creating a loop in Angular?

let m = 5; for (let i = 0; i < m; i++) { document.write(i); } What is the output of i in Angular? This code is not functioning as expected. $scope.B = []; angular.forEach([0, 1, 2, 3], function (value, index) { $scope.B.push ...

javascriptangularjsarrays

Implementing Multiselect Filter Functionality in Vue.js

Can someone help me with adding my selected locations and types to the filteredHotels() method in order to filter the results based on user selections? For instance, I need to filter Sydney Hotels, Sydney Backpackers, Sydney or Melbourne hotels, or all hot ...

vue.js

Sorting ascending in C with dynamic arrays

I am facing an issue with sorting a Dynamic Array list in my code. Despite my efforts, the sorting function seems to be not working as intended. Here is what I have attempted so far: void ascending_sort(Controller* ctrl) { int i,j; Cost* a ...

carraysdynamic

In PHP, convert a string such as "eg1 - eg2 - eg3" into an array by using " - " as the separator for values

Let's say I have a string: "example1 - example2 - example3". My goal is to convert this string into an array with 3 keys so I can easily loop through them. Could someone please share how I can achieve this using PHP? ...

phparraysstring

Adjust the properties within the component's styles using Angular 2

In this project, the objective is to dynamically change the background-color based on different routes. The goal is to display a specific color for UpcomingComponent while keeping the background-color consistent for all other routes. The approach involves ...

javascriptcssangular

What could be causing the error 404 message to appear when trying to retrieve video data?

I'm having trouble displaying a video in mp4 format from the code's folder. When I attempt to fetch the video by clicking on the button, it shows an empty space instead of displaying the video. Here is an example of what the output looks like. T ...

javascriptphpjsonajaxrestful-url

Problem with updating an Html.TextBoxFor based on the value of another one

I have been trying to implement a basic jQuery functionality that involves changing the text in one textbox to be half of the numeric value entered in another textbox. Below is the script I am using: <script> $(document).ready(function () { $(& ...

javascriptjqueryasp.nethtmlvisual-studio-2013

How can one eliminate the white space surrounding the data that Vue is binding?

Working with Vue, I've noticed a gap on the screen following the data binding. Instead of using Vanilla JavaScript's trim() function, is there a way to remove leading and trailing whitespace? Let me provide you with the code for the data binding ...

javascriptvue.jsionic-framework

The error message "app.use() function requires middleware function" appears when the app

Currently, I am in the process of learning node.js with express template engine by following a Udemy course called "Learn Node.js by Building 10 Projects". During one of the lectures, when the professor ran npm start localhost:3000, it worked fine for him, ...

javascriptnode.jsexpressmean

How to enable CORS with Laravel for AngularJS 'Access-Control-Allow-Origin'

Recently, I installed Laravel CORS by barryvdh. While the module appears to be functioning correctly, I am still encountering the Access-Control-Allow-Origin error. When attempting to make a request to , I receive the error message stating that no &ap ...

javascriptangularjslaravellaravel-5

Ways to modify client socket from JavaScript to PHP

Looking for a way to convert a client socket from JavaScript to PHP in order to receive data from the server socket? Check out the PHP socket Bloatless library here. This is an example of the Client Javascript code: <script> // connect to chat appl ...

javascriptphpwebsocket

Exploring the use of leaflets within LitElement

I have been working on a project involving LitElement components and I am looking to incorporate Leaflet into it. However, I am encountering difficulties with displaying the map properly. After installing Leaflet through npm in my project, I created a clas ...

javascriptleafletpolymerlit-element