写点什么

Vue 进阶(幺肆零):vue 新增数组或对象更新后,视图不更新的解决方案

发布于: 刚刚
Vue进阶(幺肆零):vue 新增数组或对象更新后,视图不更新的解决方案

一、前言

在项目开发过程中,若将页面元素全部绑定于一个表单中,且页面中的某些元素并未直接获得,在获取页面操作值时就会出现意外效果,例如不能重置页面元素。

二、场景复现

需求:在使用el-select设计表单下拉框时,若后台返回的下拉框数组长度为 1,则默认选中第一个元素。


思路:后台返回值后直接将第一个元素的value赋值给el-selectv-model


created() {....    this.MissionTemplateForm.state = this.StatusOptions[0].display_name  },
复制代码


但是后台方法返回值后,为el-select赋值前,MissionTemplateForm已经赋值了response.returnobj,导致MissionTemplateForm的结构被破坏,故需要对MissionTemplateForm中的属性进行重新设定。需要使用


Vue.set( target, propertyName/index, value )
复制代码


大家都知道vue是双向绑定响应式更新视图的,这个自动更新视图主要是针对在data里面定义的属性或者对象的键,比如有个data:{ test : 'test'};这里修改 test的值就可以自动更新相关的视图。但是,如果你后面添加一个新的属性进去然后修改 是没法自动更新的,这就涉及vue的双向绑定原理。


vue 默认的是将data 属性添加到侦察器(发布者——订阅者模式)上观察,如果有变化就响应视图更新,后面新增的属性和对象是没有做添加到观察器的这步操作的,所以需要手动添加,就需要用到Vueset方法。


Vue.set(app.arr,1,'qq')
复制代码


参数:


第一个参数想要修改的数组或者对象


{Object | Array} target
复制代码


第二个参数想要修改的对象名称或者对应的下标


{string | number} propertyName/index
复制代码


第三个参数想要修改成功后的值


{any} value
复制代码


返回值是第三个参数 value


示例如下:


 let obj = this.dryingList[ind]; this.$set(obj, "nodianzanflag", true);
复制代码

三、拓展阅读

发布于: 刚刚阅读数: 2
用户头像

No Silver Bullet 2021.07.09 加入

岂曰无衣 与子同袍

评论

发布
暂无评论
Vue进阶(幺肆零):vue 新增数组或对象更新后,视图不更新的解决方案