Question

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

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

我的组件中有一个函数，它应该在点击按钮后改变obj.quota的值，如：

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

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

1 个答案: