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 🙂
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