变化值和V-的Vuejs

Question

渲染对象我有一个jsonArray，在我的模板组件具有V-像：

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

而且我在我的组件的功能应该改变obj的价值。配额点击按钮后，如：

refreshValue: function(element){ 
    this.data.objects.forEach((e, i) => { 
     if (e.id == element.id) { 
     this.data.objects[i].quota = e.fractionNuminator /e.fractionDenominator; 
     } 
    }); 
} 

但问题是对象不刷新，而不是渲染对象的新的价值。

我错了什么？我应该如何改变v-for的价值？

谢谢！

Answer 1

我能够在this jsFiddle中得到这个工作。

<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; 
     } 
     }); 
    } 
    } 
})