Vue之$set

问题描述

vue的data里边声明或者已经赋值过的对象或者数组时，向对象中添加新的属性，如果更新此属性的值，是不会更新显示视图的。

解决方法

<template>
  <div class="second-block" >
   <ul class="list-ul">
     <li class="list-li" v-for="(item,index) in list" :key="index"  @click="updateListData(index)">
        {{item.title}}
     </li>
   </ul>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        list:[
          {
              id : 1,
              selected : true,
              title : 'aaa',
              newtitle : 'aaa1'
          },
          {
              id : 2,
              selected : false,
              title : 'bbb',
              newtitle : 'aaa2'
          },
          {
              id : 3,
              selected : true,
              title : 'ccc',
              newtitle : 'aaa3'
          }
        ]
      }
    },
    methods:{
      updateListData(index){
        console.log(index)
        // 页面未更新
        this.list[index] = {  //不响应
          id : 313,
          selected : true,
          title : 'ccc113',
          newtitle : 'aaa33'
        }
        // 页面更新
        this.$set(this.list, index, { //响应
            id : 31,
            selected : true,
            title : 'ccc11',
            newtitle : 'aaa3'
        })
        this.list.splice(index, 1, {  //响应
          id : 31,
          selected : true,
          title : 'ccc11',
          newtitle : 'aaa3'
        })
        this.list.length = 2;  //不响应
        this.list.splice(2)  //响应
      }
    }
  }
</script>

<style lang="less">
  .second-block{
    width: 100%;
    height: 200px;
    line-height: 200px;
    text-align: center;
    float: left;
  }
  ul li{
    list-style-type: none;
  }
  .list-ul{
    .list-li{
      line-height: 48px;
    }
    .list-li:nth-child(2n){
      background:#666666;
    }
    .list-li:nth-child(2n-1){
      background:#e3e3e3;
    }
  }
</style>