根据布尔数组在 Vue.js 中绑定 class

Question

我有一系列文本字段，每个字段旁边都有一个按钮。当用户点击其中一个字段旁边的按钮时，我想对该按钮应用特定样式（以更改其颜色）——本质上允许用户 "tick" 他们已经检查了该字段（类似于清单).

页面上有九个文本 fields/buttons，我将所有按钮的状态存储在一个名为 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 class 没有应用到按钮。绑定到数组中的布尔值似乎是一个问题，因为当我仅绑定到 data() 中声明的标准布尔值时，它工作正常。

我最终确实需要将所有已检查的状态存储在一个数组中，以便我可以在允许用户提交页面之前评估所有已检查的状态。

如有任何帮助，我们将不胜感激。

Answer 1

这很常见 reactivity problem。

文档中：

Due to limitations in JavaScript, Vue cannot detect the following changes to an array:

When you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue

When you modify the length of the array, e.g. 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)
}

根据布尔数组在 Vue.js 中绑定 class

Bind class in Vue.js based upon array of booleans

javascript

vue.js

vuejs2

vue-reactivity