2

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

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

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

任何帮助，将不胜感激。

4

1 回答 1

2

这是常见的反应性问题。

在文档中：

由于 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)
}
于 2018-09-09T01:56:23.343 回答