这是一个简单的加减,一个‘加减’为一个组件,当我把数组传入的时候(数组里面是对象),点击 +
or -
理论上来说数据应该会变化(虽然我改变的是传入对象的某个属性)
但实际没有发生变化
根据 Vue 的响应式原理,通过 Object.definePrototpye() 设置 getter() 和 setter() 来实现,而我在控制台打印看到数组里的对象是有 get() 和 set() 方法的,那它的数据应该是响应式的才对啊
为什么它没有发生变化呢?
还有我用的是 vue 2.x版本的
我好像知道为什么错了,我的‘加减’是用的 methods 传入参数(而且传入的是基本数据类型)实现的,在 methods 里面的修改只是修改了值的复制,如果传入的是对象的引用就可以了,或者直接修改成 item.count++
代码如下
<div class="cart" v-if="check">
<goods
v-for="(item,index) in products"
:key="index"
:imageData="item.img"
:productName="item.name"
:price="item.price"
:shop="item.shop"
>
<template #checkbox>
<van-checkbox v-model="checked[index]" style="margin-right: 10px""></van-checkbox>
</template>
<template #right-icon>
<div style="align-self: flex-end; flex: 0">
<!-- failure -->
<!-- <van-icon name="minus" size="12px" @click.stop = minus(item.count)></van-icon> -->
<!-- success -->
<van-icon name="minus" size="12px" @click.stop = "item.count--"></van-icon> -->
<span @click="numberDialog = !numberDialog">{{ item.count }}</span>
<van-icon name="plus" size="12px" @click.stop = "add(item.count)"></van-icon>
</div>
</template>
</goods>
</div>
created() {
axios.get("http://localhost:3000/cartData")
.then(res => {
res.data.forEach((item) => {
this.products.push(item);
})
this.check = true;
}).catch(err => {
console.log(err);
})
this.check = false;
},
methods: {
add(number) {
// failure
if(number > 0) number++;
// success1 直接修改 data() 中的数据
// 此时 number 值是‘被修改’的数组下标
this.products[number].count++;
// success2 传入对象引用
// 此时 number 值是‘被修改’的对象
number.count += 1;
return number;
},
minus(number) {
// 同上
if(number > 0) number--;
return number;
}
}
###提供代码 ,有多种可能啊。
- 组件写的有问题,没有触发更新操作。(可以通过看控制台是否更新了来判断)
- 组件写的没问题,但是使用了一个对象上没有的key。没有触发更新操作。(这个就通过$set、或者直接操作数组splice一下。)
- 组件写的没问题,同时也是一个已有的key。那么就看看是不是通过可监听的方式添加的。(可监听
push、unshift、splice
)(不可监听arr[4] = {}
) - 如果上面都没问题,那么就看看是不是被冻结了呀。
用Vue.$set修改