v-bind无法检测到数组内容的更改（Vue.js）

Question

我想在用户点击按钮后更改图像的id。最初，元素的id应该是B0_h，但是在用户单击按钮后，数组中的值应该更改为true。最初，所有数组值都是false，但是一旦数组中元素的值变为true，id就应该变为B0_v。

使用Vue开发工具，我注意到数组中的值正在按预期更改，但是v-bind无法检测到这种更改。从v-bind的角度来看，B [0]的值仍然是false。因此，id仍然是B0_h。

这是我的模板：

<template>
    <div>
       <button type="button" id="button0" v-on:click="toggle('B0')"></button>
       <img src="../assets/img1.png" alt="A" v-bind:id="[A[0] === true ? 'A0_v' : 'A0_h']" >
       <img src="../assets/img2.png" alt="B" v-bind:id="[B[0] === true ? 'B0_v' : 'B0_h']">
    </div>
</template>

以下是我的脚本：

<script>
export default {
  name: 'Demo',
  props: {},
  data: function(){
      return{
          A: [false,false,false,false,false,false,false,false,false],
          B: [false,false,false,false,false,false,false,false,false],
          playerTurn: true;
      }
  },
  methods: 
  {
    toggle(x)
    {
      if(x == 'B0' && this.playerTurn)
      {
        this.B[0] = true;
      }
    }
  }
}
</script>

你知道我在这里做错了什么吗？

- Vktr

Answer 1

这是由于Vue在数组和对象中处理变化的方式。Vue不会跟踪您所做的更改。为此，它提供了一个特殊的方法：set。它需要3个参数：要更改的数组（或对象）、索引和应设置的值。

在您的示例中，它将如下所示：

Vue.set(this.B, 0, true);

用这行代码替换原来的代码：

this.B[0] = true;

欲了解更多信息，请查看官方文档。以下为简短摘录：

Vue.set( 目标对象, 属性名/索引, 值 ) 参数:

• {Object | Array} target: 目标对象
• {string | number} propertyName/index: 属性名/索引
• {any} value: 值

返回值: 设定的值.

用途:

将属性添加到响应式对象中，确保新属性也是响应式的，并触发视图更新。必须使用此方法向响应式对象中添加新属性，因为Vue无法检测普通属性的添加（例如：this.myObject.newProperty = 'hi'）。

- cezar