基于布尔数组在 Vue.js 中绑定类

Question

我有一系列文本字段，每个字段旁边都有一个按钮。当用户点击其中一个字段旁边的按钮时，我想将特定样式应用于该按钮（以更改其颜色） - 本质上允许用户“勾选”他们已检查该字段（类似于清单）。

页面上有九个文本字段/按钮，我将所有按钮的状态存储在一个名为 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() 中声明的标准布尔值时，它可以正常工作。

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

任何帮助将不胜感激。

Answer 1

这是常见的reactivity problem。

在文档中：

由于 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)
}