Vue v-for 不更新模型变量

Question

我尝试使用动态属性呈现页面。我的代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root">
  <div v-for="current in 2" :key="current">
    <p :style="currentObject.color">
      {{ current  }}
      {{ currentObject.text }}
    </p>
  </div>
</div>

脚本是

let vm = new Vue({
  el : "#root",
  created: function () {
  console.log(this.current)
  },
  data : {
    current : 0,
    arrs : [
      {
        color : "background-color: blue;",
        text : "Dabodee Dabodai"
      },
      {
        color : "background-color: red;",
        text : "Angry"
      },
      {
        color : "background-color: green;",
        text : "See it works!"
      }
    ]
  },
  computed : {
    currentObject : function() {
      return this.arrs[this.current];
    }
  }
});

我想通过 currentObject 使用不同的颜色和容器对象文本来 p 标记，但是当渲染页面时，计算的行为就像 current 总是 0。输出为蓝色，currentObject 中的文本为“Dabodee Dabodai”

我做错了什么？

Answer 1

Computed 属性在这里不是最好的选择，因为它会在它改变时被计算，这意味着如果你遍历一个数组，计算值将在每次迭代时改变，最后你将拥有所有实例具有相同的值：

• https://vuejs.org/v2/guide/computed.html

您想要的是遍历您的数组或访问所需的位置；所以最简单的方法将在这里工作。正如有人已经说过 for 循环将从 1 开始，所以你想做一个 -1 从第一个数组位置开始：

<div id="root">
  <div v-for="current in 3" :key="current">
    <p :style="arrs[current-1].color">
      {{ current  }}
      {{ arrs[current-1].text }}
    </p>
  </div>
</div>

如果您希望每次更新都保持反应性，您可以跟踪 arrs 值的变化，并在数组更新时使用手表执行操作以刷新某些项目

• https://vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property

Answer 2

问题是，在您的情况下，计算的属性 currentObject 在完整的 Vue 实例中是可访问的。 this.current 是 0 并且不会更新，所以 currentObject 总是返回相同的值。

如果您真的想通过v-for 循环访问属性，则必须牢记in 2 循环始终以1 开头。

最佳做法是使用 (current, index) in arrs 循环数组

let vm = new Vue({
  el : "#root",
  data : {
    arrs : [
      {
        color : "background-color: blue;",
        text : "Dabodee Dabodai"
      },
      {
        color : "background-color: red;",
        text : "Angry"
      },
      {
        color : "background-color: green;",
        text : "See it works!"
      }
    ]
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root">
  <div v-for="(current, index) in arrs" :key="index">
    <p :style="current.color">
      {{ current.text }}
    </p>
  </div>
</div>

Answer 3

首先你的 v-for 变量名是错误的，你已经在 data 中有 current，计算属性也没有附加到 v-for 循环，这里是工作示例：

模板：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js></script>
<div id="root">
    <div v-for="(item, index) in arrs" :key="index">
        <p :style="{ backgroundColor: item.color }">
            {{ index  }}
            {{ item.text }}
        </p>
    </div>
</div>

和 Vue 代码：

let vm = new Vue({
  el : "#root",
  data : {
    arrs : [
      {
        color : "blue",
        text : "Dabodee Dabodai"
      },
      {
        color : "red",
        text : "Angry"
      },
      {
        color : "green",
        text : "See it works!"
      }
    ]
  }
});

Answer 4

v-for 中有语法错误

v-for 循环遍历数组 并且在javascript语法中用于循环遍历数组

let arrs = [
      {
        color : "background-color: blue;",
        text : "Dabodee Dabodai"
      },
      {
        color : "background-color: red;",
        text : "Angry"
      },
      {
        color : "background-color: green;",
        text : "See it works!"
      }
    ]
for(i in arrs){
console.log(arrs[i])
}

更正的代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root">
  <div v-for="current in arrs" :key="current">
    <p :style="currentObject.color">
      {{ current  }}
      {{ currentObject.text }}
    </p>
  </div>
</div>

修改后，上面的 sn-p 应该可以工作