vue.set()

前景：没别的就是在项目中想动态设置数组内的值发现不可行，无法实时变化，各种查最后无意间看到了vue的set方法

感觉vue官网又更新了，应该没事就翻翻看官网...我看着都不眼熟了，插的广告也愈发多了。。。

vue官网：
https://cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B

vue.set的api：https://cn.vuejs.org/v2/api/#Vue-set

官网的：
### [Vue.set( target, propertyName/index, value )](https://cn.vuejs.org/v2/api/#Vue-set "Vue.set( target, propertyName/index, value )")

*   **参数**：

    *   `{Object | Array} target`
    *   `{string | number} propertyName/index`
    *   `{any} value`
*   **返回值**：设置的值。

*   **用法**：

    向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 `this.myObject.newProperty = 'hi'`)

    注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

`Vue.set方法：`

Vue.set(vm.userInfo,'address','beijing') //此时就是在不改变地址引用 就可以直接改变数据  并且渲染在页面上
vm.$set(vm.userInfo,'address','beijing') 也可以实现一样的效果

对于列表 上述两种set用法都可以实现改变数据 渲染在网页上
Vue.set(vm.userInfo,1,5)
vm.$set(vm.userInfo,2,10)

实际使用如下：👇

defaultBgcolor： [] //单独设置的颜色数组

// 点击文章，对应的背景色进行切换（原来数组内的颜色值随着改变
// 背景色选中change  Vue.set(vm.items, indexOfItem, newValue)
  //this.$set(_this.defaultBgcolor, index, 1)

      this.leftArticleData.forEach((value,index) => {
        if(value.id == ids) {
          _this.$set(_this.defaultBgcolor, index, 1)
        } else {
          _this.$set(_this.defaultBgcolor, index, 0)
        }
      })

// 每篇文章xia的对应的评论数
// _this.$set(_this.comArr, i, res.data)
//this.comArr : []  评论值数组

    everyComments() {
      console.log('进入添加文章数目--添加')
      let _this = this
      for(let i = 0; i < _this.leftArticleData.length; i++) {
        _this.$api.ARTICLES.getCommentCount({articleId: this.leftArticleData[i].id}).then(res => {
          _this.$set(_this.comArr, i, res.data)
        }).catch(err => {
          console.log('err')
        })
      }
    }

最后编辑于：2020.01.10 18:19:17