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

После двух дней попыток разобраться в этом я подумал, что спрошу вас. Я думаю, что у меня есть простая проблема, однако из-за ограниченных знаний я не могу найти решение. В основном у меня есть список с кнопками 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.


javascript vue.js vuetify.js vuejs2
person Nearshore    schedule 02.03.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

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

проверьте это перо

person Boussadjra Brahim    schedule 02.03.2020
comment
Большое вам спасибо, Буссдраджа! Он почти работает так, как ожидалось, однако, если я нажимаю кнопку второй группы, кнопка ОК в первой группе отключается. Я думаю, это из-за общей индексной переменной. Верный? Спасибо за ручку, она мне очень помогла !! - person Nearshore; 02.03.2020
comment
я не понял проблему с предложенным ответом - person Boussadjra Brahim; 02.03.2020
comment
Предлагаемый ответ работает почти идеально. Спасибо за это. Извините за недостаточную точность. Дело в том, что если вы нажмете ОК в тексте 1, а затем в тексте 2, кнопка ОК в тексте 1 потеряет цвет фона. - person Nearshore; 02.03.2020