Vue中使用this.$set()如何新增数据,更新视图

 更新时间:2022年06月29日 08:38:13   作者:倘若hfl  
这篇文章主要介绍了Vue中使用this.$set()实现新增数据,更新视图方式。具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

使用this.$set()新增数据,更新视图

描述

如果在实例创建之后添加新的属性到实例上,它不会触发视图更新

简单的讲就是

在页面渲染完成之后,对data里的某个数组或对象进行新增删除属性操作是监听不到的,视图不会更新

<div id='app'>
    <el-button @click="setinfo">新增属性</el-button>
    <div v-for="item in info">{{item}}</div>
  </div>
data: {
      info: {
        id: 1,
        name: '老王',
      }
    },
setinfo() {
        let that = this
        that.info.age = 11
        console.log(that.info)
      },

可以看到点击按钮之后,打印出的数据中有age,但是视图没更新

正确的应该是使用this.$set

setinfo() {
        let that = this
        that.$set(that.info,'age','11')
        console.log(that.info)
      }

this.$set(target, key, value)

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

删除属性可以使用this.$delete(target,key)

this.$delete(that.info,"name")

说说vue.set() (this.$set)用法

这段时间工作上经常操作数组数据,并且要求实时更新视图数据,这个时候首先想到的是 vue.set() 方法(注:当发现model上的数据发生改变,而页面上的视图数据没有改变,推荐使用该方法),该方法的使用首先要在页面引入vue,应该这样写:import Vue from 'vue',这样才能在组件全局获取到vue这个实例对象。

如果你觉得引入麻烦,推荐使用vue.set的别名this.$set。

那么现在上代码:

HTML:

<ul class="province_area_style province_area">
            <li v-for="(item, index) in provinceArrs" :key='index' :id='index'><input type="checkbox" :id= "'checkbox' + index" :class="{checkOn: item.checkOn, checkOff: item.checkOff}" @click="clickProvince(index, item)"><label :for="'checkbox' + index">{{item.name}}</label><i @click="clickProvinceIcon(index, item)"></i></li>
          </ul>

JS:

clickProvince(pindex, pitem) {
      pitem.checkOn = !pitem.checkOn
      pitem.checkOff = !pitem.checkOff
      this.$set(this.provinceArrs, pindex, {p_name: pitem.p_name, p: pitem.p, name: pitem.name, c: pitem.c, checkOn: pitem.checkOn, checkOff: pitem.checkOff})
}

从上代码可知,点击事件clickProvince( ),可以改变数组 this.provinceArrs 中指定下标 pindex 的值并实时更新页面的视图,这样就极大的方便了操作数组中的某项值,使用示列:this.$set(arr,  index,  val)。

当然,this.$set除了用于操作数组外还可以操作对象,使用示例:this.$set( obj, key, val). 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue关闭eslint检查的方式

    vue关闭eslint检查的方式

    这篇文章主要介绍了vue关闭eslint检查的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 2种在vue项目中使用百度地图的简单方法

    2种在vue项目中使用百度地图的简单方法

    在本篇文章中我们给大家整理了2种关于VUE项目中使用百度地图的最简单的方法,非常实用,一起来学习下。
    2018-09-09
  • vue navbar tabbar导航条根据位置移动实现定位、颜色过渡动画效果的代码

    vue navbar tabbar导航条根据位置移动实现定位、颜色过渡动画效果的代码

    这篇文章主要介绍了vue navbar tabbar导航条根据位置移动实现定位、颜色过渡动画效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • Vue实现input宽度随文字长度自适应操作

    Vue实现input宽度随文字长度自适应操作

    这篇文章主要介绍了Vue实现input宽度随文字长度自适应操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue3渲染器与编译器深入浅析

    Vue3渲染器与编译器深入浅析

    这篇文章主要为大家介绍了Vue3渲染器与编译器深入浅析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • 浅谈Vuex注入Vue生命周期的过程

    浅谈Vuex注入Vue生命周期的过程

    这篇文章主要介绍了Vuex 注入 Vue 生命周期的过程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • vue之带参数跳转打开新页面、新窗口

    vue之带参数跳转打开新页面、新窗口

    这篇文章主要介绍了vue之带参数跳转打开新页面、新窗口方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 还在用vuex?来了解一下pinia

    还在用vuex?来了解一下pinia

    这篇文章主要为大家详细介绍了pinia,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • vue watch监控对象的简单方法示例

    vue watch监控对象的简单方法示例

    这篇文章主要给大家介绍了关于vue watch监控对象的简单方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • Element Plus在el-form-item中设置justify-content无效的解决方案

    Element Plus在el-form-item中设置justify-content无效的解决方案

    这篇文章主要介绍了Element Plus在el-form-item中设置justify-content无效的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论