Vue公司JS 2：計算綁定屬性，數據屬性

我有Vue.js 2的數據對象，看起來像這樣：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>，因爲這看起來不是最好的解決方案，也不是很優雅。

來源

2017-09-03 Shan

爲什麼要將它存儲在一個狀態中的任何特殊原因？理想情況下，我們應該只保留最低限度的所需數據，並按照您的方式獲取所有可能的數據。 – aks

我想在用戶輸入一些數據後將每個數據對象添加到數據庫中。我想知道Vue是否有自己的存儲計算方法，因此我稍後再調用每個對象時不必做相同的計算。 – Shan

您可以使用'watch'，然後在您的任何一個值發生變化時更改總數。 – aks

這裏有幾個方法：綁定到一個方法，結合一個計算性能，並結合到在計算財產通話過程中保存的數據屬性：

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

這就是你要找的東西嗎？

來源

2017-09-04 02:01:44 exclsr

Vue公司JS 2：計算綁定屬性，數據屬性

回答

相關問題