抛出踩坑:解决vuejs 创建对象之后添加新的属性实现不了双向绑定问题
当业务场景,需要在请求接口数据新增自定义的属性
let foodList = [ {title: '回锅肉', price: 99.0}, {title: '油焖大虾', price: 199.0}];
我们要做数量增加时候,后自定义添加数量属性quantity:
// 添加自定义属性数量quantityfoodList.forEach(item => { item.quantity = 0;});/** [ { title: '回锅肉', price: 99, quantity: 0 }, { title: '油焖大虾', price: 199, quantity: 0 } ] */
我们需要对数量增加的时候,quantity是实现不了双向绑定的,比如:
// 特殊菜数量添加quantityAction(type, item) { // 加法 if (type === 'add') { item.quantity++ } else { // 减法 if (item.quantity > 0) { item.quantity-- } }}// 几时quantity是在增减,实际页面是达不到双向绑定的
解决方法:
这时候需要用$set方法,设置对象的属性。
如果对象是响应式的,确保属性被创建后也是响应式的,同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。
vm.$set( target, key, value )- 参数: - {Object | Array} target - {string | number} key - {any} value - 返回值:设置的值。
用法:
foodList.forEach(item => { this.$set(item, 'quantity', 0)});
这样后面创建的属性就可以达到双向绑定了!