解决vuejs 创建数据后设置对象的属性实现不了双向绑定问题

Posted 2021-05-01 一波万波

抛出踩坑：vue创建后的数据，自定义设置对象的属性，实现不了双向绑定

当业务场景，需要在请求接口数据后新增自定义的属性

let foodList = [
  {title: '回锅肉', price: 99.0},
  {title: '油焖大虾', price: 199.0}
];

我们要做数量增加时候，后自定义添加数量属性quantity：

// 添加自定义属性数量quantity
foodList.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)
});

这样后面创建的属性就可以达到双向绑定了！