javascript - v-bind 没有检测到数组内容的变化(vue js)

Question

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

使用 Vue 开发工具，我注意到数组中的值正在按预期变化，但是，v-bind 无法检测到这种变化。从v-bind 的 Angular 来看，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>

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

Answer 1

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

在您的示例中，它看起来像这样:

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

用这一行代替:

this.B[0] = true;

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

Vue.set( target, propertyName/index, value ) Arguments:

• {Object | Array} target
• {string | number} propertyName/index
• {any} value

Returns: the set value.

Usage:

Adds a property to a reactive object, ensuring the new property isalso reactive, so triggers view updates. This must be used to add newproperties to reactive objects, as Vue cannot detect normal propertyadditions (e.g. this.myObject.newProperty = 'hi').