Skip to content
Advertisement

Change buttons color in a vuetify list

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

Advertisement