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>

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

Answer 1

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

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

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

代替以下内容：

this.B[0] = true;

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

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


{对象|数组}目标

{string |数字} propertyName / index

{any}值


返回：设置值。

用法：

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

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

1 个答案:

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