vue 计算属性不能实时计算

Question

 computed:{
            //订单总计-店铺优惠券后 2018-12-31
            aftershopticket_total:function(){

                //将所有店铺计算好的 店铺优惠券后的价格加到一起

                var x;
                var t=0;
                for(x in this.shopcart_shop){
                    t+=parseFloat(this.afterdiscount_shoptotal(x));
                }

                return t.toFixed(2);

            },
        },

this.afterdiscount_shoptotal(x)数据已经发生改变 但是整个计算属性还是不会重新执行
放在计算属性和方法里面都是一样 应该怎么处理才能实时计算

Answer 1

你这个问题我以前遇到过，之所以出现这个问题的情况是，在Vue里面动态的给一个对象添加属性，vue是不能监听的。比如就像你这里，这个shopcart_shop这个对象一样,刚开始是一个空对象({})，然后你通过事件。this.shopcart_shop.addkey = 1，虽然对象变成了 {addkey: 1},但是vue是不能相应监视的。所以这里有2个办法解决。
第一个办法，你在data哪里定义shopcart_shop这个对象的时候给他添加addkey这个属性。比如：

data: {
    shopcart_shop: {
        addkey: 0
    }
}

这种方法，就会让vue去监视shopcart_shop对象里面的addkey的值,你后面改变了这个值,就会实时的相应.虽然这种方法可以解决这个问题,但是很鸡肋,比如你在定义对象的时候要把所有的属性都写上,这肯定是不现实的,所以可以采用下面的第二种方法.
第二种方法:
在vue中提供了一个全局的api 叫做set
地址:vue中set的描述

这里说的很清楚(我画红线的地方).无法监听新加属性.如果要新增,不能通过直接打点的方法.要通过set函数.所以照上面的列子,我们可以写成:

Vue.set(this.shopcart_shop, 'addkey', 0);

当然肯定是推荐第二种方法,官方的推荐方法

Answer 2

我解释下vue计算属性，它是针对vue中模型data中的属性的一个重新计算, 比如你看下面的代码

<script>
export default {
  data () {
    return {
      a: 0  // data中的属性a
      b: 1  // data中的属性b
    }
  },
  computed: {
    // 这里做了一个total的计算，但是他们是依赖于data属性中的a和b属性变化后才会得到重新计算
    total: function () {
       return this.a + this.b
    }
  }
}
</script>

Answer 3

this.shopcart_shop 这个数据没有发生变化吧，为什么不用 watch

watch:{
    shopcart_shop:{
        handler(newval,oldVal){
            这里面去写this.afterdiscount_shoptotal参数的逻辑
        },
        deep:true
    }
}