Question

我在Vue.js 2中有一个数据对象，如下所示：

data: {
     items: [
          {
            value1: 10, 
            value2: 10,
            valuesum: ""
          },
          {
            value1: 10, 
            value2: 100,
            valuesum: "",
          }
     ]

我在表中渲染该数据对象并对其运行计算。我希望以某种方式计算valuesum属性并将其存储在每个对象中。换句话说，我希望代码基本上执行此操作：

data: {
     items: [
          {
            value1: 10, 
            value2: 10,
            valuesum: {{ value1 + value2 }} //20
          },
          {
            value1: 10, 
            value2: 100,
            valuesum: {{ value1 + value2 }} //110
          }
     ]

computed属性似乎无法实现此目的。我尝试使用以下功能，但这不起作用：

 function (index) {
            for (let i = 0; i < this.items.length; i++ ){
                return this.items[index].value1 + this.items[index].value2;
            }
        }

我最接近答案的是通过内联计算，但我无法将其结果绑定到items.total对象。我的HTML看起来像这样：

<table id="table">
        <thead>
            <tr>
                <td>Value 1</td>
                <td>Value 2</td>
                <td>Sum</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in items">
                <td><input type="number" v-model="item.value1"></td>
                <td><input type="number" v-model="item.value2"></td>
                <td> {{ item.value1 + item.value2 }} </td>
            </tr>
        </tbody>
    </table>

但是我无法添加v-model，因为它不是输入。我希望避免在列中添加只读<input>，因为这似乎不是最佳解决方案，并且不是非常优雅。

Answer 1

以下是一些方法：绑定到方法，绑定到计算属性，以及绑定到计算属性调用期间保存的数据属性：

  <table id="table">
     <thead>
        <tr>
           <td>Value 1</td>
           <td>Value 2</td>
           <td>Sum</td>
           <td>Sum</td>
           <td>Sum</td>
        </tr>
     </thead>
     <tbody>
        <tr v-for="(item, index) in items">
           <td><input type="number" v-model="item.value1"></td>
           <td><input type="number" v-model="item.value2"></td>
           <td> {{ sum(item) }} </td><!-- method -->
           <td> {{ sums[index] }}</td><!-- computed -->
           <td> {{ item.valuesum }}</td><!-- data property via computed -->
        </tr>
     </tbody>
  </table>

剧本：

var vm = new Vue({
   el: "#table",
   data: function () {
      return {
         items: [
            {
               value1: 10, 
               value2: 10,
               valuesum: 0
            },{
               value1: 10, 
               value2: 100,
               valuesum: 0,
            }
         ]
      }
   },

   computed: {
      sums: function () {
         var val = [];
         for (var index in this.items) {
            var sum = this.sum(this.items[index]);
            val.push(sum);

            // Update the local data if you want
            this.items[index].valuesum = sum;
         }
         return val;
      }
   },

   methods: {
      sum: function (item) {
         // Alternate, if you take valuesum out:
         // for (var prop in item) {
         //    val += parseInt(item[prop]);
         // }
         return parseInt(item.value1) + parseInt(item.value2);
      }
   }
});

这是你要找的东西吗？

Vue JS 2：将计算属性绑定到数据属性

1 个答案: