vue中this.$set()的基本用法实例

 更新时间:2023年01月15日 14:48:14   作者:紫米粥  
最近工作上经常操作数组数据,并且要求实时更新视图数据,这个时候首先想到的是 vue.set(),下面这篇文章主要给大家介绍了关于vue中this.$set()的基本用法实例,需要的朋友可以参考下

1、this.$set()的作用

向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。 this.$set()用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性。

简单来说:就是我们在methods中给数据添加了一个属性,我们能从控制台能打印出来,但是视图并没有及时更新,所以无法显示,但是借助于this.$set()方法我们就能成功的解决这个问题了,不仅能从控制台打印出来我们想要的值,而且相应的值也能实时刷新视图。

2、this.$set()的语法

this.$set(target, propertyName/index, value)

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

(2)propertyName/index: 要更改的具体数据 (索引)

(3)value: 重新赋的值(any)

3、this.$set()的简单案例

(1)前端代码:

 <el-form>
                <el-form-item label="用户地址" prop="aloWhTo">
                    <el-select v-model="form.aloWhTo" @change="testConsistent" placeholder="请选择转入仓库" readonly filterable style="width:95%" >
                        <el-option v-for="item in WarehouseOptions" :key="item.whId" :label="item.whName" :value="item.whId">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
<el-button type="primary"  @click="handClick()">更改数据 </el-button>

(2)当我们点击修改数据之后,我们会发现控制台的信息变化了,但是下拉框中的数据没有发生变化。

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

 handClick(){
                //不起作用
                this.WarehouseOptions[0] = { whId:'4',whName:'数据是否修改'}
                // let item = { whId:'4',whName:'数据是否修改'} //此时对象的值更改了,但是视图没有更新
                // this.$set(this.WarehouseOptions,0,item)
                console.log("测试 ")
                console.log(this.WarehouseOptions[0])
            },

(3)当我们采用this.$set()方法之后,问题解决。

 handClick(){
                //不起作用
                //this.WarehouseOptions[0] = { whId:'4',whName:'数据是否修改'}
                let item = { whId:'4',whName:'数据是否修改'} //此时对象的值更改了,但是视图没有更新
                this.$set(this.WarehouseOptions,0,item)
                console.log("测试 ")
                console.log(this.WarehouseOptions[0])
            },

4、this.$set()的应用场景

对于数组,对象,集合都可以用,比如在表格里面进行嵌套,可以根据索引进行修改并及时进行刷新!!!

大家可以参考我这篇博客中的案例强化一下对this.$set()的理解和认识!!

el-table+el-tree+el-select动态选择对应值:

https://www.jb51.net/article/272773.htm

总结

到此这篇关于vue中this.$set()的基本用法实例的文章就介绍到这了,更多相关vue this.$set()用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 在Vue3中如何更优雅的使用echart图表详解

    在Vue3中如何更优雅的使用echart图表详解

    ECharts是一个强大的画图插件,在vue项目中,我们常常可以引用Echarts来完成完成一些图表的操作,下面这篇文章主要给大家介绍了关于在Vue3中如何更优雅的使用echart图表的相关资料,需要的朋友可以参考下
    2022-05-05
  • vue首次赋值不触发watch的解决方法

    vue首次赋值不触发watch的解决方法

    今天小编就为大家分享一篇vue首次赋值不触发watch的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • ant design的table组件实现全选功能以及自定义分页

    ant design的table组件实现全选功能以及自定义分页

    这篇文章主要介绍了ant design的table组件实现全选功能以及自定义分页,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue父组件中获取子组件中的数据(实例讲解)

    vue父组件中获取子组件中的数据(实例讲解)

    下面小编就为大家带来一篇vue父组件中获取子组件中的数据(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Vue3中createWebHistory和createWebHashHistory的区别详析

    Vue3中createWebHistory和createWebHashHistory的区别详析

    这篇文章主要给大家介绍了关于Vue3中createWebHistory和createWebHashHistory区别的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-06-06
  • vue + canvas实现涂鸦面板的示例代码

    vue + canvas实现涂鸦面板的示例代码

    这篇文章主要给大家介绍了vue + canvas实现涂鸦面板的示例,文章通过代码示例介绍的非常详细,感兴趣的小伙伴跟着小编一起来看看吧
    2023-08-08
  • vue组合式API浅显入门示例详解

    vue组合式API浅显入门示例详解

    这篇文章主要为大家介绍了vue组合式API浅显入门示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • vue中关于confirm确认框的用法

    vue中关于confirm确认框的用法

    这篇文章主要介绍了vue中关于confirm确认框的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-08-08
  • VSCode中书写Vue无代码提示该如何解决

    VSCode中书写Vue无代码提示该如何解决

    vscode开发vue非常好用,因为有很多的插件,可以补全语法,或者高亮便于检查错误,但我最近发现我的vscode却没有了代码提示,这篇文章主要给大家介绍了关于VSCode中书写Vue无代码提示该如何解决的相关资料,需要的朋友可以参考下
    2022-12-12
  • 利用VUE框架,实现列表分页功能示例代码

    利用VUE框架,实现列表分页功能示例代码

    本篇文章主要介绍了利用VUE框架,实现列表分页功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-01-01

最新评论