Vue中，如何在方法中给data中的对象动态的添加字段

发表于 更新于 分类于

问题描述

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

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

问题解决方式

通过查资料，找到 Vue 提供的一种全局添加对象字段的方法。

具体解决方式

1
Vue.$set("想要添加字段的对象", "字段名", "字段值");

示例

1
2
3
4
let foodList = [
  { title: "回锅肉", price: 99.0 },
  { title: "油焖大虾", price: 199.0 }
];

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

1
2
3
4
5
6
7
8
9
10
11
// 添加自定义属性数量quantity
foodList.forEach(item => {
  item.quantity = 0;
});

/**
[
  { title: '回锅肉', price: 99, quantity: 0 },
  { title: '油焖大虾', price: 199, quantity: 0 }
]
 */

我们需要对数量增加的时候，quantity 是实现不了双向绑定的，比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
// 特殊菜数量添加
quantityAction(type, item) {
  // 加法
  if (type === 'add') {
    item.quantity++
  } else {
    // 减法
    if (item.quantity > 0) {
      item.quantity--
    }
  }
}
// 几时 quantity 是在增减，实际页面是达不到双向绑定的

解决方法：
这时候需要用$set 方法，设置对象的属性。

如果对象是响应式的，确保属性被创建后也是响应式的，同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。

1
vm.$set(target, key, value);
  • 参数：
    • {Object | Array} target
    • {string | number} key
    • {any} value
    • 返回值：设置的值。

用法：

1
2
3
foodList.forEach(item => {
  this.$set(item, "quantity", 0);
});

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

Vue 中的组件的 data 为什么是一个函数？

每次使用组件时都会对组件进行实例化操作，并且调用 data 函数返回一个对象作为组件的数据源。这样可以保证多个组件间数据互不影响。

如果 data 是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间 data 不冲突，data 必须是一个函数。