Vue 进阶(幺肆零):vue 新增数组或对象更新后,视图不更新的解决方案
一、前言
在项目开发过程中,若将页面元素全部绑定于一个表单中,且页面中的某些元素并未直接获得,在获取页面操作值时就会出现意外效果,例如不能重置页面元素。
二、场景复现
需求:在使用el-select
设计表单下拉框时,若后台返回的下拉框数组长度为 1,则默认选中第一个元素。
思路:后台返回值后直接将第一个元素的value
赋值给el-select
的v-model
。
但是后台方法返回值后,为el-select
赋值前,MissionTemplateForm
已经赋值了response.returnobj
,导致MissionTemplateForm
的结构被破坏,故需要对MissionTemplateForm
中的属性进行重新设定。需要使用
大家都知道vue
是双向绑定响应式更新视图的,这个自动更新视图主要是针对在data
里面定义的属性或者对象的键,比如有个data:{ test : 'test'};
这里修改 test
的值就可以自动更新相关的视图。但是,如果你后面添加一个新的属性进去然后修改 是没法自动更新的,这就涉及vue
的双向绑定原理。
vue
默认的是将data
属性添加到侦察器(发布者——订阅者模式)上观察,如果有变化就响应视图更新,后面新增的属性和对象是没有做添加到观察器的这步操作的,所以需要手动添加,就需要用到Vue
的set
方法。
参数:
第一个参数想要修改的数组或者对象
第二个参数想要修改的对象名称或者对应的下标
第三个参数想要修改成功后的值
返回值是第三个参数 value
示例如下:
三、拓展阅读
版权声明: 本文为 InfoQ 作者【No Silver Bullet】的原创文章。
原文链接:【http://xie.infoq.cn/article/e7257676c11c2bb5d5d4d3454】。文章转载请联系作者。
评论