vue computed 使用小问题
生活随笔
收集整理的這篇文章主要介紹了
vue computed 使用小问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這個是一個vue 中 computed 的一個小問題
解決方案是通過提issue 解決的,issue鏈接
Vue.js version
1.0.26
實例
jsfiddle
代碼部分
<div id="app"><div class="hello"><h1 @click="add()">添加</h1> {{ goods | json }}<br/> {{ result }}</div> </div> new Vue({el: '#app',data: {goods: [],},methods: {add() {const good = {number: 1};this.goods.push(good);console.log(this.goods);}},computed: {// 一個計算屬性的 getterresult: function() {let number = 0;for (let i in this.goods) {number += this.goods[i].number;}return number;}} })關鍵的部分是在
// 一個計算屬性的 getterresult: function() {let number = 0;for (let i in this.goods) {number += this.goods[i].number;}return number;}采用這樣的計算方式在特定的手機上是有問題的,
測試結果
左邊是 ios 9.3.4 iphone 6 plus
右邊是 我的小米手機
有問題的設備
ios 9.3.3 and 9.3.4 iphone 6s plus or iphone 5s
沒問題的設備
ios 8.2 iphone 6 ,some android phone,PC chrome
解決方案
改變一下寫法就可以了
result: function() {return this.goods.reduce((sum, good) => sum + good.number, 0)}具體是因為什么造成的可能涉及的比較多,我就暫時不去探討了。
另外在寫js 的時候最好遵守 airbnb 規則,可以更好的避免出現問題
總結
以上是生活随笔為你收集整理的vue computed 使用小问题的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 深入理解脚本化CSS系列第五篇——动态样
- 下一篇: JS求多个数组的重复数据