While there are similar questions out there, none of them quite address what I'm looking for (or maybe I just don't fully understand them and if that's the case, my apologies). Here is one example, but it seems to be related to Vue.JS 3 which I am struggling to adapt to my code, even though the requirement remains the same.
My goal is to change the background color of individual items in a v-for loop based on the selection made from a drop-down menu. Currently, all items change color whenever the drop-down selection changes.
You can view the project on Codepen.io here: https://codepen.io/Salixa/pen/jOQPRNz. To see the list, you need to input a name, click 'Add Player', and then 'Check Availability'. When you select an option from the drop-down, it changes the class for each item in the list. You can also add availability to get an idea of what it should look like!
Current behavior: Screenshot demonstrating current behavior on codepen.io Ideal behavior: Screenshot demonstrating ideal behavior on codepen.io
The issue lies with a v-for block iterating over values in an object (within an array). Each value corresponds to a selection box. The predefined values render with the correct color class, as expected. However, when I change the selection, the color class applies to all items, which is not the desired outcome.
This is the current HTML code:
<div id="displayAvailability" v-for="(value, key, index) in player" :key="index">
<div :id="'listItem'+index+1" :class="[selection != '' ? {available:selection==='Available', tentative:selection==='Tentative', busy:selection==='Busy', session:selection==='Session', unknown:selection==='Unknown'} : {available:value==='available', tentative:value==='tentative', busy:value==='busy', session:value==='session',unknown:value==='Unknown'}]" :key="index">
<select id="availabilityOptions" @change="updateColour($event)" >
<option>{{value}}</option>
<option v-model="selection">Available</option>
<option v-model="selection">Busy</option>
<option v-model="selection">Tentative</option>
<option v-model="selection">Session</option>
</select>
</div>
</div>
This JavaScript snippet controls the color change:
updateColour(event){
this.selection = event.target.value;
console.log(this.selection);
return this.selection;
}
The problem arises because 'selection' gets changed to the selected option, affecting the style of all items since it's applied to the div for each item. Is there a way to change only the individual item?
Note: I don't want to update the player object with the new selection. In the future, I plan to have default availability and allow each player to update availability individually for each day. Additionally, I'm working with Vue.JS 2 due to work constraints and the need to learn it better. The random placement of keys and indexes in some parts of the code is me trying to learn from other StackOverflow responses, as I'm still pretty new to this and not entirely confident about understanding everything correctly :(
EDIT I attempted to implement Matthew's suggestions (thanks Matthew!) but without success. The modified code looks like this:
<div :id="'listItem'+index+1" :class="[selection != '' ?
{available:selection==='Available',tentative:selection==='Tentative',busy:selection==='Busy',session:selection==='Session',unknown:selection==='Unknown'}
: {available:value==='available', tentative:value==='tentative', busy:value==='busy', session:value==='session',unknown:value==='Unknown'}]" :key="index">
<select id="availabilityOptions" v-model="value">
<option>{{value}}</option>
<option>Available</option>
<option>Busy</option>
<option>Tentative</option>
<option>Session</option>
</select>
Unfortunately, after these changes, a) no colors change at all now b) when adding a new player, all previous changes are erased.