Javascript Vue v-for不更新模型变量

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

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

我想通过currentObject使用不同的颜色和容器对象文本进行p标记，但在呈现页面时，当前值始终为0。输出为蓝色，currentObject的文本为“Dabodee Dabodai”

---

我做错了什么？

您的v-for中有语法错误

通过数组的v-for循环 在javascript语法中，in用于循环数组

让arrs=[
{
颜色：“背景色：蓝色；”，
文字：“大宝台大宝台”
},
{
颜色：“背景色：红色；”，
文字：“愤怒”
},
{
颜色：“背景色：绿色；”，
文字：“看它的作品！”
}
]
对于（我在arrs中）{
console.log（arrs[i]）
}

首先，您的v-for变量名称错误，您在

数据中已经有
当前的
，而且计算属性未附加到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>

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

如果您真的想通过
v-for
循环访问属性，那么在2
中使用
，您必须记住循环总是以1开始

最佳做法是在arrs中使用
（当前，索引）循环数组


let vm=new Vue({
el:“根”，
数据：{
arrs：[
{
颜色：“背景色：蓝色；”，
文字：“大宝台大宝台”
},
{
颜色：“背景色：红色；”，
文字：“愤怒”
},
{
颜色：“背景色：绿色；”，
文字：“看它的作品！”
}
]
},
});


{{current.text}

Computed属性不是这里的最佳选项，因为它在每次更改时都会被计算，这意味着如果您在数组中迭代，计算值在每次迭代时都会更改，最后您将拥有具有相同值的所有实例：




您想要的是遍历数组或访问所需的位置；因此，最简单的方法将在这里起作用。因为有人已经声明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>



{{current}}
{{arrs[current-1].text}


如果每次更新都希望保持其反应性，则可以跟踪arrs值的更改，并在更新阵列时使用手表刷新某些项



Vue v-for可以用作迭代器，如果您通过编号，则代码的输出为{“颜色”：“背景色：蓝色；”，“文本”：“Dabodee Dabodai”}Dabodee Dabodai{“颜色”：“背景色：红色；”，“文本”：“愤怒的”}Dabodee Dabodai{“颜色”：“背景色：绿色；”，“文本”：“看到它的效果了！”）蓝色的Dabodee Dabodai，我正在尝试使用当前变量触发computed。感谢您的回答，但我还有其他目标，当我更改数组对象时，我也想更改属性。你的代码可以工作，但不能满足我的目标。那么你想做一个动态表单还是什么？是的，我想做一个动态表单，比如说，我有一个按钮可以改变arr[0]。颜色我想用p这个颜色@ğağlarBingöl好的，你会改变
当前的
，计算会更新道具，但删除v-for，它不应该在这里。Computed将完成所有工作感谢您的回答，但我的另一个目标是当我更改属性数组时，要更改p属性，所以我也需要Computed。@ğağlarBingöl数组也是被动的，所以您不需要Computed。模板将自动更新。或者，如果只希望渲染一个属性，则不需要v-for，只需使用computed
let vm = new Vue({
  el : "#root",
  data : {
    arrs : [
      {
        color : "blue",
        text : "Dabodee Dabodai"
      },
      {
        color : "red",
        text : "Angry"
      },
      {
        color : "green",
        text : "See it works!"
      }
    ]
  }
});

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