v-bind 没有检测到数组内容的变化（vue js）答案

【问题标题】：v-bind isn't detecting the change in array content (vue js)v-bind 没有检测到数组内容的变化（vue js）
【发布时间】：2020-02-23 12:20:03
【问题描述】：

我正在尝试在用户单击按钮后更改图像的id。最初，元素的id 应该是B0_h，但是在用户单击按钮后，数组中的值应该更改为true。最初所有的数组值都是false，但是一旦数组中元素的值变为真，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>

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

【问题讨论】：

标签： javascript html vue.js vuejs2

【解决方案1】：

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

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

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

用这一行代替：

this.B[0] = true;

更多信息请查看官方documentation。这是一个简短的摘录：

Vue.set(target, propertyName/index, value) 参数：

{对象 |数组} 目标

{字符串 | number} 属性名称/索引

{任何}值

返回：设定值。

用法：

向反应性对象添加一个属性，确保新属性是也是反应性的，因此会触发视图更新。这必须用于添加新的反应对象的属性，因为 Vue 无法检测到正常属性添加（例如 this.myObject.newProperty = 'hi'）。

【讨论】：