vue中 this.$set的解释和用法

 问题:

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

解决:

调用方法:

​​​​​​​ this.$set(target,key,value)

   target:要更改的数据源(可以是一个对象或者数组
   key:要更改的具体数据 (索引
   value: 重新赋的值 

栗子:

(1)单个修改

this.items[0].message='one1'; //一般是可以更新视图  

this.$set的写法:

this.$set(this.items[0],'message','one1'); //数字类型可省略引号

 (2)多个修改

this.items[0] = { message: "one3", id: "13" };//视图未更改

this.$set的写法:

this.$set( this.items, 0, { message: "one3", id: "13" })

(3)添加修改

this.items[3]={ message: "four", id: "4" };//数据已经被改变  但是视图层未渲染

 this.$set的写法:

this.$set( this.items, 3, { message: "four", id: "4" })//视图渲染

附录:

<!--
 * @Descripttion: 
 * @version: 
 * @Author: congsir
 * @Date: 2021-09-28 17:04:49
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-09-28 17:28:22
-->
<template>
  <div>
    <div v-for="item in items" :key="item">
      <ul :key="item">
        <li>{{ item.id }}---{{ item.message }}</li>
      </ul>
    </div>
    <button @click="handle">点击</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { message: "one", id: "1" },
        { message: "two", id: "2" },
        { message: "three", id: "3" },
      ],
    };
  },
  methods: {
    handle() {
      console.log("dfsdf");
      // this.items[0].message='one1';
      // this.$set(this.items[0],'message','better')
      // this.items[0] = { message: "one3", id: "13" };
      this.$set( this.items, 0, { message: "one3", id: "13" })
    },
  },
};
</script>

<style>
</style>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值