Vuejs2 在v-for Vuejs中更改值和渲染对象

我有一个jsonArray，在我的模板组件中有v-for，比如：

<div v-for="obj in data.objects" :key="obj.id">
   <strong>Quota:</strong>
      <span>{{obj.quota}}</span>
</div>

但问题是对象不会刷新，也不会呈现对象的新值

我怎么了？我应该如何更改v-for中的值

---

谢谢

配额：
{{obj.quota}
刷新
var vm=新的Vue({
el:“#vue实例”，
数据：{
对象：[
{id:1，配额：100，分子：1，分母：3}，
{id:2，配额：120，分子：2，分母：5}，
{id:3，配额：75，分子：5，分母：6}，
{id:4，配额：350，分子：3，分母：8}
]
},
方法：{
refreshValue:函数（元素）{
this.objects.forEach（（e，i）=>{
if（e.id==element.id）{
this.objects[i].quota=e.numerator/e.demonator；
}
});
}
}
})

我能让它正常工作

配额：
{{obj.quota}
刷新
var vm=新的Vue({
el:“#vue实例”，
数据：{
对象：[
{id:1，配额：100，分子：1，分母：3}，
{id:2，配额：120，分子：2，分母：5}，
{id:3，配额：75，分子：5，分母：6}，
{id:4，配额：350，分子：3，分母：8}
]
},
方法：{
refreshValue:函数（元素）{
this.objects.forEach（（e，i）=>{
if（e.id==element.id）{
this.objects[i].quota=e.numerator/e.demonator；
}
});
}
}
})

在使用

v-for

确定时始终添加

键

，感谢您的建议，这是因为由于JS的实现方式，VueJS无法监视阵列中元素的动态更改。在循环的每个迭代中使用

Vue.set

：谢谢terry！：）使用

v-for

ok时始终添加

key

，谢谢您的建议，这是因为由于JS的实现方式，VueJS无法监视数组中元素的动态更改。在循环的每个迭代中使用

Vue.set

：谢谢terry！：）谢谢，我明白了，问题可能是我有个目标？所以我的数组对象实际上是在data.objects中，所以它不是在data{}@LorenzoBerti中初始化的，

对象

在

数据

中，但是你可以通过

对象

直接在模板中访问它，而不是

数据.objects

。另外，如果您在组件中工作，

数据必须是函数而不是对象：谢谢，我明白了，问题可能是我有一个对象？所以我的数组对象实际上是在data.objects中，所以它不是在data{}@LorenzoBerti中初始化的，
对象
在
数据
中，但是你可以通过
对象
直接在模板中访问它，而不是
数据.objects
。此外，如果在组件中工作，
数据必须是函数而不是对象：
refreshValue: function(element){
   this.data.objects.forEach((e, i) => {
      if (e.id == element.id) {
         this.data.objects[i].quota = e.fractionNuminator /e.fractionDenominator;
      }
   });
}

<div id="vue-instance">
  <div v-for="obj in objects">
    <strong>Quota:</strong>
    <span>{{obj.quota}}</span>
    <button @click="refreshValue(obj)">Refresh!</button>
  </div>
</div>

var vm = new Vue({
  el: '#vue-instance',
  data: {
    objects: [
      {id: 1, quota: 100, numerator: 1, denominator: 3},
      {id: 2, quota: 120, numerator: 2, denominator: 5},
      {id: 3, quota: 75, numerator: 5, denominator: 6},
      {id: 4, quota: 350, numerator: 3, denominator: 8}
    ]
  },
  methods: {
    refreshValue: function(element) {
      this.objects.forEach((e, i) => {
        if (e.id == element.id) {
          this.objects[i].quota = e.numerator /e.denominator;
        }
      });
    }
  }
})