如何使用Vue.set为对象数组的每个元素添加响应式属性

问题原因 #

你的代码不生效是两个核心问题导致的：

• 直接赋值let newCountryArrWithStatusField = this.countryChanges只是拿到了原数组的引用，并没有生成新数组，操作的还是Vuex中存储的原始数据
• Vue2无法监听已有对象新增的属性，你直接写el.status = 0属于给已存在的对象加新属性，响应式系统无法捕获这个变更

解决方案 #

这里给你两种可选的实现方式，根据你的业务场景选就可以：

方案1：不修改原始Vuex数据（更推荐）

不需要用到this.$set，直接生成带新属性的新对象数组即可，同时建议把方法移到计算属性里，利用计算属性的缓存提升性能：

computed: {
  ...mapState(['countryChanges']),
  // 直接在这里处理成带status字段的数组，模板直接用就行
  newCountryChangesArray() {
    return this.countryChanges.map(el => {
      // 生成新对象，status属性在对象初始化时就存在，天然具备响应性
      return {
        ...el,
        status: 0
      }
    })
  }
}

模板使用方式不变：v-for="country in newCountryChangesArray"

方案2：需要给原数组对象新增响应式属性

如果你的业务场景要求修改原数组里的对象，就用this.$set给每个对象新增属性：

methods: {
  newCountryChangesArray() {
    // 如果不想修改原Vuex数组可以先做浅拷贝：const newArr = [...this.countryChanges]
    this.countryChanges.forEach(el => {
      // 调用$set给对象新增响应式属性
      this.$set(el, 'status', 0)
    })
    return this.countryChanges
  }
}

注意如果countryChanges是存在Vuex里的状态，不建议在组件内直接修改，最好把修改逻辑放到Vuex的mutation中执行，避免状态变更不可追溯。

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