Связать класс в Vue.js на основе массива логических - PullRequest
Новая
       30

Связать класс в Vue.js на основе массива логических

0 голосов
/ 09 сентября 2018

У меня есть серия текстовых полей с кнопкой рядом с каждым полем. Когда пользователь нажимает кнопку рядом с одним из полей, я хочу применить к этой кнопке определенный стиль (чтобы изменить ее цвет), что, по сути, позволяет пользователю «отметить», что он проверил это поле (аналогично контрольному списку).

На странице имеется девять текстовых полей / кнопок, и у меня есть состояние всех кнопок, хранящихся в массиве items_checked, который инициализируется в data(), следующим образом: 

items_checked: [false, false, false, false, false, false, false, false, false]

Каждая кнопка имеет следующий код: 

 <button class="btn btn-danger" v-on:click="toggleChecked(0)" v-bind:class="{'itemChecked' : items_checked[0]}">

, где число указывает индекс кнопки (то есть 0 - первая кнопка, 1 - вторая кнопка и т. Д.), Чтобы соответствовать эквивалентному логическому значению в items_checked.

Событие v-on:click просто переключает проверенный статус в items_checked для нажатой кнопки: 

toggleChecked (itemIndex) {
  if (this.items_checked[itemIndex] === false) {
    this.items_checked[itemIndex] = true
  } else {
    this.items_checked[itemIndex] = false
  }
  console.log(this.items_checked)
}

Это работает, когда console.log показывает переключение логических значений.

Однако v-bind не работает, так как класс itemChecked не применяется к кнопке. Кажется, это проблема привязки к логическому значению в массиве, поскольку, когда я привязываю только к стандартному логическому значению, объявленному в data(), оно работает нормально.

Мне в конечном итоге нужны все проверенные состояния, хранящиеся в массиве, чтобы я мог оценить, что все они были проверены, прежде чем разрешить пользователю отправить страницу.

Любая помощь будет оценена.

1 Ответ

0 голосов
/ 09 сентября 2018

Это обычная проблема реактивности .

В документе:

Из-за ограничений в JavaScript Vue не может обнаружить следующее изменения в массиве:

Когда вы непосредственно устанавливаете элемент с индексом, например, vm.items[indexOfItem] = newValue

Когда вы изменяете длину массив, например vm.items.length = newLength

Вы можете использовать глубокую копию 

toggleChecked (itemIndex) {
  this.items_checked[itemIndex] = !this.items_checked[itemIndex]
  this.items_checked = JSON.parse(JSON.stringify(this.items_checked))
  console.log(this.items_checked)
}

Другое решение использует Vue.set

toggleChecked (itemIndex) {
  var oldValue = this.items_checked[itemIndex]
  this.$set(this.items_checked, itemIndex, !oldValue)
  console.log(this.items_checked)
}
...