根据布尔数组在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()中声明的标准布尔值时，就可以正常工作。

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

任何帮助将不胜感激。