vue2.0中set添加属性后视图不能更新的解决办法


Posted in Javascript onFebruary 22, 2019

今天在工作中遇到一个问题,郁闷了很久,特地写一篇博客记录一下,方便以后再遇到可以查找,也分享个各位小伙伴,在网上查找很多资料说用Vue.$set设置属性后视图也会更新,但是真相并不是这样,通过等于号赋值和$set方法我都试了,前台属性值改变但是视图并没有改变,下面上图:

vue2.0中set添加属性后视图不能更新的解决办法

我需要做的就是下面的Email和Fax属性的值从第一排的输入框用户输入获取,但是输入过后下面的文本框的值并为发生变化,在浏览器console却发现值已经改变了,这让我很郁闷,网上搜了一堆答案都没有解决,后面查看vue官网有个delete方法,如果我先把这个属性delete再重新set是否可以,如图:

vue2.0中set添加属性后视图不能更新的解决办法

图1.第一排控件的代码

vue2.0中set添加属性后视图不能更新的解决办法

 图2.第一排控件方法代码

vue2.0中set添加属性后视图不能更新的解决办法

图3.最终解决代码

好啦 今天就写到这 希望能帮到你们 博客仅为日常学习和交流使用 如有不正确的地方 请指正

以上就是相关的解决办法总结,感谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JQuery.closest(),parent(),parents()寻找父结点
Feb 17 Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
JavaScript中Math.SQRT2属性的使用详解
Jun 14 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
详解JavaScript中数组的reduce方法
Dec 02 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
Vue 监听元素前后变化值实例
Jul 29 Javascript
浅谈Node框架接入ELK实践总结
Feb 22 #Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 #Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 #Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 #Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 #Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
Feb 21 #Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 #Javascript
You might like
在线竞拍系统的PHP实现框架(二)
2006/10/09 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
javascript动态创建表格及添加数据实例详解
2015/05/13 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
jQuery简单实现MD5加密的方法
2017/03/03 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
Angular.JS中的指令引用template与指令当做属性详解
2017/03/30 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
Python实现获取某天是某个月中的第几周
2015/02/11 Python
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
实用自动化运维Python脚本分享
2018/06/04 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
华三通信H3C面试题
2015/05/15 面试题
高中生活自我鉴定
2014/01/18 职场文书
数控技术应用个人求职信范文
2014/02/03 职场文书
保险专业大学生职业规划书
2014/03/03 职场文书
会议开幕词
2015/01/28 职场文书
Python基础之元组与文件知识总结
2021/05/19 Python