购物车vuejs中的反应性

Question

我正在创建一个非常简单的购物车（不考虑使用 vuex 来保持简单），它允许用户添加几个服务。其中一种方法是addToCart()。

addToCart(service) {
            if (this.cart[service.id] !== undefined) {
                this.cart[service.id].quantity =
                    this.cart[service.id].quantity + 1;
            } else {
                this.cart[service.id] = {
                    name: service.name,
                    quantity: 1,
                    price: service.price
                };
            }
        }

我们有一个数据对象cart，只要将任何服务添加到购物车，它就会更新。

data: {
        cart: {}
    },

但是，我似乎遗漏了一些东西，因为它不是反应性的。当我尝试遍历对象时，除非我返回上一步，否则它不会发生。所以只是想了解我是否还有其他需要做的事情。

<tr  v-for="item in cart">

Answer 1

使用this.$set(object, key, value)。

例子，

this.$set(this.cart, service.id, {
    name: service.name,
    quantity: 1,
    price: service.price
})

由于一开始购物车是空的，当你向cart 对象添加属性时，vue 不知道这些变化。所以通知 vue 我们使用this.$set。另一种解决方案是提前定义所有属性。

更多详情：https://vuejs.org/v2/guide/reactivity.html#For-Objects