как в vuejs по клику на кнопку поменять цвет

249

18 мая 2017, 11:32

Есть у меня кнопки выведены с помощью vuejs

<button v-for='word in showSelectWords' v-on:click='clivk' class='btn' :class='{"success": word.isTrue, "danger": word.isFalse}' v-text='word.en'></button>
clivk: function (word) {
        if (word.en == this.word.en) {
            word.isTrue = true;
        }
        else {
            word.isFalse = true;
        }
    }

по клику на ней меняется класс, в зависимости от условия. Как можно сменить бекграунд не прибегая к дополнительным переменным (word.isTrue, word.isFalse)?

Answer 1

И возможно ошибка в синтаксисе ,не clivk , а cliсk

Answer 2

Если у вас по клике на кнопку меняется сам класс кнопки, то для смены фона можно задать новые данные в цсс.

Ну т.е. первый класс имеет один фон заданный в стилях, а у второго задать другой фон. Как пример:

До:

.btn-success {
   background-color: #41B883!important;
   min-width: 230px;
   min-height: 30px;
   border: 0px;
   border-radius: 0px;
   cursor: pointer;
}

После:

.btn-error {
   background-color: #FFFFFF!important;
   min-width: 230px;
   min-height: 30px;
   border: 0px;
   border-radius: 0px;
   cursor: pointer;
}