Vue.set()
修改一个对象的属性值。
这个方法通常用于 Vue.js 无法检测到对象属性值的变化时。
selectedProduct: function (item) {
// 接收的参数
if (typeof item.checked == 'undefined') {
// 怎样判断一个对象的变量存不存在 看他的typeof == undedined
/**
* 两种全局注册和局部注册 让vue 来监听
* 第一个参数 要添加的对象
* 第二个参数 添加的变量
* 第三个参数 添加的值是什么
* 意思是我们通过 Vue全局注册 往item变量中注册一个checked 属性 它的值是 true
*
* this.$set(item,"checked",true) 局部注册
*/
Vue.set(item, "checked", true);//注册checked属性,并赋值
} else { //已有checked属性
item.checked = !item.checked;//设置当前状态未选中
}
this.caleTotalPrice();//调用计算总价的方法
},
// 计算选中商品的总价
caleTotalPrice: function () {
var _this = this;
_this.totalMoney = 0;
_this.productList.forEach(function (item, index) {//遍历数组
if (item.checked) {
_this.totalMoney += item.productPrice * item.productQuentity;
}
});
},
Vue.set(item, "checked", true);
这段代码的意思是,设置 item
对象的 checked
属性为 true
。
如果出现问题,可能的原因为:
item
对象可能尚未被初始化,或者你正在试图访问的路径在item
对象中不存在。"checked"
属性可能被设置为null
、undefined
、NaN
、或者0
,这将导致 Vue.js 无法检测到该属性的变化。- Vue 实例可能没有
$nextTick
方法,这通常是由于 Vue 实例没有正确创建或者初始化。
你可以通过以下方式来解决这些问题:
- 确保
item
已经被初始化,且你正在访问的路径在item
中存在。例如,如果你想改变item.someArray[0].checked
,你需要先确保item.someArray
已经被初始化,并且至少有一个元素。 - 如果你正在尝试改变一个已经存在并且已经被 Vue.js 观察的属性,确保你没有无意中将其设置为
null
、undefined
、NaN
或0
。 - 确保你的 Vue 实例已经被正确创建和初始化。例如,你应该在你的 Vue 组件或 Vue 实例中调用
this.$nextTick()
,而不是直接调用。