Vue v-for 不更新模型变量

Posted 2023-02-16

【中文标题】Vue v-for 不更新模型变量

【英文标题】：Vue v-for not update model variable

【发布时间】：2021-05-19 09:23:27

【问题描述】：

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

<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”

我做错了什么？

【参考方案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

【参考方案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>

【讨论】：

感谢您的回答，但是当我更改数组对象时，我还有其他目标，我也想更改属性。你的代码可以工作，但不能实现我的目标。

所以你想制作动态表格还是什么？

是的，我想要动态表单，例如认为我有一个可以更改 arr[0].color 的按钮，我想以该颜色显示

@ÇağlarBingöl 好的，你将更改 current，computed 将更新道具，但删除 v-for，它不应该在这里。 Computed 将完成所有工作

【参考方案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!"
      
    ]
  
);

【讨论】：

感谢您的回答，但我的另一个目标是当我更改属性数组时，想要更改 p 属性，所以我也需要计算。

@ÇağlarBingöl 数组也是反应式的，所以你不需要计算。模板将自动更新。或者如果你只想渲染一个属性，你不需要 v-for，只需使用计算的

【参考方案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 应该可以工作

【讨论】：

Vue v-for 可以作为迭代器，如果你传递数字

你的代码输出是 "color": "background-color: blue;", "text": "Dabodee Dabodai" Dabodee Dabodai "color": "background-color: red;" , "text": "愤怒" Dabodee Dabodai "color": "background-color: green;", "text": "看到它有效！" Dabodee Dabodai 蓝色，我尝试用当前变量触发计算。