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: {
    // 一个计算属性的 getter
    result: function() {
      let number = 0;
      for (let i in this.goods) {
        number += this.goods[i].number;
      }
      return number;
    }
  }
})

关键的部分是在

    // 一个计算属性的 getter
    result: function() {
      let number = 0;
      for (let i in this.goods) {
        number += this.goods[i].number;
      }
      return number;
    }

采用这样的计算方式在特定的手机上是有问题的,

测试结果

左边是 ios 9.3.4 iphone 6 plus
右边是 我的小米手机
result

有问题的设备

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 规则,可以更好的避免出现问题

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值