我们先看看官网给出的解释:

1、更新数组:

我们有一个数组,包括人员姓名和人员年龄两个属性。

想要实现在页面刚加载的时候改变姓名为李四的人的信息。

首先我们想到的是在mouted函数中直接修改name为李四的人的信息

this.itemList[1] = {
      name: '李思思',
      age: 30
    }
    console.log(this.itemList[1]);

但是这时候控制台打印的数据更新了,但是页面视图却没有更新。这时候我们就需要用到this.$set()来更新视图了。

 <!-- 使用$set更新数组的值 -->
    <ul>
      <li v-for="(item,index) in itemList" :key="index">
        <div>
          <span>姓名:</span>
          <span>{{item.name}}</span>
          <span>年龄:</span>
          <span>{{item.age}}</span>
        </div>
      </li>
    </ul>

data() {
    return {
      itemList: [
        {
          name: "张三",
          age: 18,
        },
        {
          name: "李四",
          age: 20,
        },
        {
          name: "王五",
          age: 22,
        },
      ],
      person: {
        name: '前端劝退师'
      }
    }
  },
  mounted() {
    // 要求
    // 修改数组中姓名为李四的人的信息
    // this.itemList[1] = {
    //   name: '李思思',
    //   age: 30
    // }
    // console.log(this.itemList);
    console.log("======================");
    this.$set(this.itemList, 1, {
      name: '李思思',
      age: 30
    });
  },

2、更新对象:

eg:给对象添加一个属性并赋值,上代码:

 <!-- 使用$set更新对象的值-----给对象添加属性 -->
    <div style="display:flex;">
      <p>{{person.name}}</p>
      <el-input v-model="person.score" style="width:200px;"></el-input>
    </div>
    <el-button @click="addScore">自定义成绩</el-button>

 methods: {
    addScore() {
      this.person.score = "60"
      console.log(this.person);
      // this.$set(this.person, "score", "60");
    }
  }

在button事件点击的时候给person对象添加score属性,发现:

我们发现控制台打印的结果显示给person对象添加了score属性并赋值了60,但是在页面上并没有更新新加的score属性和它对应的值,这时候便使用this.$set()来更新视图层了。

methods: {
    addScore() {
      // this.person.score = "60"
      // console.log(this.person);
      this.$set(this.person, "score", "60");
    }
  }

这时候就显示合适了。

注意:this.$set( target, key, value )

target:要更改的数据源(可以是对象或者数组)

key:要更改的具体数据

value :重新赋的值。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐