Vue中如何向对象内部的contains数组添加多个元素不被覆盖？

你之前出现覆盖的原因是调用Vue.set时操作的目标是answers对象，相当于每次都把answers下contains属性的整个值替换为你要添加的单个元素，而非往已有数组里追加内容。针对Vue2的响应式规则，你可以用以下两种方式实现需求：

方法1：使用数组变异方法（最推荐） #

Vue2已经对push、splice等7个数组原生方法做了响应式劫持，直接调用即可触发视图更新，追加多个元素可以直接用push方法：

// 直接传入多个要添加的元素
this.answers.contains.push(元素1, 元素2, 元素3)

// 如果待添加内容本身是一个数组，可以用扩展运算符展开
const addList = [itemA, itemB, itemC]
this.answers.contains.push(...addList)

方法2：使用Vue.set/this.$set操作 #

如果场景需要用set方法实现，要将操作目标改为contains数组本身，而非外层的answers对象：

const addList = [itemA, itemB, itemC]
addList.forEach(item => {
  // 每次往数组末尾追加一个元素，数组长度作为新增元素的索引
  Vue.set(this.answers.contains, this.answers.contains.length, item)
})

注意事项 #

• 不要直接通过索引赋值数组元素（如this.answers.contains[2] = 'xxx'），Vue2无法监听这类操作，不会触发视图更新
• 不要直接修改数组的length属性（如this.answers.contains.length = 0），如需清空数组请用this.answers.contains.splice(0)

内容的提问来源于stack exchange，提问作者Max