v-bind未检测到数组内容的更改（vue js）

Vktr 发表于 Dev

电压

我正在尝试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>

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

es撒

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

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

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

将此行而不是：

this.B[0] = true;

有关更多信息，请检查官方文档。这是一个简短的摘录：

Vue.set（target，propertyName / index，value）参数：

{对象| 数组}目标

{string | 数字} propertyName / index

{any}值

返回：设置值。

用法：

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