Изменить цвет кнопок в списке vuetify

Question

Попытавшись выяснить это в течение двух дней, я подумал, что спрошу вас. Я думаю, что у меня есть простая проблема, однако из-за ограниченных знаний я не могу найти решение. По сути, у меня есть список с кнопками OK / NOK , и я хочу изменить цвет фона кнопки (нажатой) (либо зеленый , либо красный )

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

а как получить ссылку на нажатую кнопку? Для установки результата в значение OK / NOK:

setOk: function (id, i) {
            let parent = this.rows.find(data => data.rowid === id);
            parent.result = true;

        },

Заранее благодарим за помощь!

N.

Answer 1

Добавьте свойство данных с именем indexes, которое изначально является пустым массивом:

 data(){
    return{
      indexes:[],
     ....
}
}

и в setOk метод pu sh выбранный индекс в массиве индексов:

 setOk: function (id, i) {
            let parent = this.rows.find(data => data.rowid === id);
            parent.result = true;
          this.indexes.push(i);

        }

цветовая пуговица кнопки должна условно зависеть от этого массива индексов:

   <v-btn class="mx-2" fab dark :color="indexes.includes(i)?'green':''" small @click="setOk(item.rowid, i)">

проверьте это ручка