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

【问题标题】：Vue JS 2: Bind computed property to data attributeVue JS 2：将计算属性绑定到数据属性
【发布时间】：2018-02-12 02:10:55
【问题描述】：

我在 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>，因为这似乎不是最好的解决方案，也不是很优雅。

【问题讨论】：

有什么特殊的原因你想把它存储在一个 state 中吗？理想情况下，我们应该只在状态中保留最少的所需数据，并按照您的方式推导出一切。
我想在一些用户输入后将每个数据对象添加到数据库中。想知道Vue有没有自己的存储计算的方法，所以以后调用每个对象的时候就不用做同样的计算了。
您可以使用watch，然后在您的值发生变化时更改总数。
你能把data 部分放到计算部分（即静态内容）吗？否则，只需创建数据属性的计算副本并添加计算的内容。

标签： javascript vue.js vuejs2

【解决方案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);
      }
   }
});

这就是你要找的东西吗？

【讨论】：