在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue computed綁定數(shù)組，當(dāng)數(shù)組中元素變化，不會(huì)重新計(jì)算。

vue computed綁定數(shù)組，當(dāng)數(shù)組中元素變化，不會(huì)重新計(jì)算。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed message: "{{ computedMessage }}"</p>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
  el: '#example',
  data: {
    message:[{a:"1"},{a:"2"},{a:"1"},{a:"2"}]
  },
    computed: {
    // 計(jì)算屬性的 getter
    computedMessage: function () {
        var sum=0;
        this.message.forEach(function(data){
          sum=parseInt(sum)+parseInt(data.a);
      });
      return sum;
    }
  }
})

</script>
</html>

如上，我希望的是當(dāng)數(shù)組中的元素改變時(shí)，能實(shí)時(shí)計(jì)算元素總和。

回答
編輯回答
愿如初

computed計(jì)算函數(shù)需要ruturn一個(gè)值。很明顯你是在forEach函數(shù)內(nèi)部return的，而computedMessage函數(shù)并沒有返回值，所以需要在forEach函數(shù)外部return

2017年1月8日 06:08
編輯回答
未命名

很尷尬...出現(xiàn)一些語法錯(cuò)誤。糾正過來了，但我的問題還沒解決。

2017年8月5日 02:28
編輯回答
骨殘心

我試了一下，
你改完之后已經(jīng)可以實(shí)時(shí)計(jì)算出總和了啊

  <div id="example">
    <input type='text' v-model='message[0].a'>
    <p>Original message: "{{ message }}"</p>
    <p>Computed message: "{{ computedMessage }}"</p>
  </div>

你像這樣加個(gè)input框試試看

2017年10月30日 16:21
編輯回答
心沉
    computedMessage: function () {
        var sum=0;
        this.message.forEach(function(data){
          sum += parseInt(data.a);
        });
        return sum
    }
2017年5月26日 10:05
編輯回答
旖襯
data() {
    return {
        message:[{a:"1"},{a:"2"},{a:"1"},{a:"2"}]
    }
}

修改代碼后，經(jīng)測試計(jì)算有效。
注：組件的 data 必須是一個(gè)函數(shù)。
當(dāng)在組件中使用 data 屬性的時(shí)候 (除了 new Vue 外的任何地方)，它的值必須是返回一個(gè)對象的函數(shù)。
官網(wǎng)參考地址

2017年5月9日 02:11