3

Есть у меня кнопки выведены с помощью 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)?

3 ответа 3

2

TEMPLATE:

<button v-for='word in showSelectWords' 
        v-on:click='FormatButton' 
        class='btn'
        :class='classes' 
        v-text='word.en'>
</button>

COMPONENT:

data(){

    return{
        //...
        classes:{
            success: false,
            danger: false,
        }
    }

},
methods:{
     FormatButton(word){

          let isEqual = (word.en == this.word.en),
              c = this.classes;

          c.success = isEqual;
          c.danger= !isEqual;       

    }
}

ПРИМЕЧАНИЕ:

документация.

3
  • success to danger
    – Qwertiy
    18 мая 2017 в 11:12
  • @Qwertiy Подправил. Вроде бы исходя и логики обработчика приведенного в вопросе, теперь все верно. 18 мая 2017 в 11:14
  • Ага, выглядит нормально.
    – Qwertiy
    18 мая 2017 в 15:00
0

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

1
  • Извиняюсь, немного затупил с примером, должно быть v-on:click='clivk', а не v-on:click='aaa'. Уже поправил, а с синтаксисом все нормально
    – user211866
    17 мая 2017 в 15:47
0

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

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

До:

.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;
}
4
  • тут проблема в том, что классы вешаются по значению свойств, если они true, а этих свойств нужно избежать
    – user211866
    17 мая 2017 в 15:48
  • созадем data() { showClass: true } дальше при клике меняем на false что-то типа метод onClick() { this.showClass = !this.showClass} и вешаем появление нужного класса с фоном на зависимость от showClass типа :class='showClass ? danger : success'
    – chatlanin
    17 мая 2017 в 16:02
  • любых переменных нужно избежать, мне на вход приходит массив, и для каждого айтема нужно отобразить бекграунд, сейчас я добавляю каждому айтему свойство, но от этого теряется скорость, по этому нужно сделать без свойств, чтоб не изменять массив
    – user211866
    17 мая 2017 в 16:08
  • Для динамического изменения стилей элемента, нужно условие при котором стиль либо меняется либо - нет. Эту динамику нужно к чему-то привязать. И вариантов два. Либо это данные (не важно какие) в блоке скрипт, либо добавляете булевское поле в сам массив и относительно него и меняйте фон. Просто так, по самому факту, что по кнопке клинкули - меняться ни чего не будет. Клик нужно связать с условием. Если же вам так важна скорость смены фона, то советую вам посмотреть в сторону серверного рендеринга, где скорость отображения страниц у конечного пользователя гораздо выше.
    – chatlanin
    18 мая 2017 в 5:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.