After having tried to figure this out for two days I thought I will ask you. I think I do have a simple problem, however because of limited knowledge I’m not able to find a solution. Basically, I do have a list with OK/NOK buttons and I want to change the background color of the (clicked) button (either green or red)
<v-list class="checklist">
<v-list-item v-for="(item, i) in rows" :key="item.rowid" bind:key="item.rowid">
<v-list-item-content>
<v-card class="mx-auto" max-width="344" outlined>
<v-list-item three-line>
<v-list-item-content>
<div class="overline mb-4">{{ item.rowid }} - {{ item.result }}</div>
<v-list-item-title class="wrap-text">{{ item.txt }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-card-actions>
<v-row align="center" justify="space-around">
<v-btn class="mx-2" fab dark small @click="setOk(item.rowid, i)">
<v-icon>done</v-icon>
</v-btn>
<v-btn class="mx-2" fab dark small @click="setNok(item.rowid, i)">
<v-icon>clear</v-icon>
</v-btn>
</v-row>
</v-card-actions>
</v-card>
</v-list-item-content>
</v-list-item>
</v-list>
But how to get the reference to the clicked button? This is to set the result to the OK/NOK value:
setOk: function (id, i) {
let parent = this.rows.find(data => data.rowid === id);
parent.result = true;
},
Thank you in advance for your help!
N.
Advertisement
Answer
Add a data property called indexes which is initially an empty array :
data(){
return{
indexes:[],
....
}
}
and in setOk method push selected index in indexes array:
setOk: function (id, i) {
let parent = this.rows.find(data => data.rowid === id);
parent.result = true;
this.indexes.push(i);
}
the color prop of the button should conditionally dependent on that indexes array :
<v-btn class="mx-2" fab dark :color="indexes.includes(i)?'green':''" small @click="setOk(item.rowid, i)">
please check this pen