[Vuejs]-How can I change an individual item's style class in a v-for list?

1👍

After fussing with this for a very long time I decided to follow a different route.
Through various other helpful answers on this site which I will endeavour to link at the bottom I found a way to get the individual DOM element using a ref. $refs is an array so in order to get a specific element you need to access it with bracket [] notation. I passed the event and the index to the updateColour() function. (Worth noting that it needs to be ref not :ref).

    <div :id="'listItem'+index+1" ref="days" :class="[selection != '' ? {available:selection==='Available',tentative:selection==='Tentative',busy:selection==='Busy',session:selection==='Session',unknown:selection==='Unknown'} : {available:availability==='available', tentative:availability==='tentative', busy:availability==='busy', session:availability==='session',unknown:availability==='Unknown'}]" :key="index">
        <select id="availabilityOptions" @change="updateColour($event,index)" >

Then I was able to access the specific element in the method and give it a class like so:

this.$refs.days[index].classList.remove("unknown","busy","tentative","session")
this.$refs.days[index].classList.add("available")

I decided to remove all other classes to ensure that one wasn’t superseding another.

Here is a newer codepen showing what I’ve done, I’ve left the previous one as-is for future people to see what was happening, and I’ll leave this one as-is as the answer.

Obviously this still has some flaws and is a work in progress but it is a solution to "how do I change the style class of a specific element as generated in a v-for list".

Helpful answers include:

https://stackoverflow.com/a/70246468/22072704 which then linked me to the Mozilla Developer Network documentation for classList.

https://stackoverflow.com/a/56687624/22072704 which helped me understand how to access the specific element although I ended up not using $el or .querySelector once I’d stumbled across classList.

https://stackoverflow.com/a/59680932/22072704 for getting me to understand refs in the first place!

Thanks again Matthew for your help 🙂

👤Salixa

1👍

Your issue may be caused by the incorrect use of v-model.
There should be only one v-model declared in the <select> tag, not in each <option>

Take a look at the docs

Leave a comment