變化值和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; 
     } 
     }); 
    } 
    } 
})