Vue2向数组添加字符串时总是替换而非追加问题排查

你的代码逻辑本身没问题，但数组始终只保留最后一个元素，大概率是组件的idArr被意外重置了，以下是常见原因和解决办法：

• 组件被重复实例化
  如果这个组件是在v-for中使用，且没有绑定唯一的:key，父组件更新时会导致组件被销毁重建，data里的idArr每次都会回到空数组状态。解决办法是给v-for的组件添加唯一key，比如：

  <your-component v-for="item in list" :key="item._id" />
  

• 其他代码重置了idArr
  检查组件内其他方法、watch钩子或者生命周期函数里，有没有不小心执行this.idArr = []这类重置操作，全局搜一下idArr的赋值语句，排除意外重置的情况。

• 确认传入的id是否唯一
  可以在updateIdArr开头加一句console.log(show._id)，确认每次传入的id是不是不同的值——虽然概率低，但如果每次都是同一个id，push自然不会新增元素。

另外，你可以临时在组件的created钩子打印idArr，如果每次调用updateIdArr前都会触发created，那肯定是组件被重建了，重点排查key的问题。

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