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')
        })
      }
    }

你可能感兴趣的:(vue.set())