Vue数组元素双向绑定,修改数组元素后视图不更新问题

原创
2019/06/18 12:05
阅读数 3.2K

因为 JavaScript 的限制,Vue.js 不能检测到下面数组变化:

  1. 直接用索引设置元素,如 vm.items[0] = {};

  2. 修改数据的长度,如 vm.items.length = 0。

为了解决问题 (1),Vue.js 扩展了观察数组,为它添加了一个 $set() 方法:

this.$set(this.number, 0 , "A");  

说明:

针对html中表单双向绑定修改后的值,数组修改可以同步页面呈现;

针对js代码中直接修改数组对象,页面呈现不同步。

示例:

//提交处理
                    var list = _this.postlist;
                    var isHasItem = false;
                    for (var i = 0; i < list.length; i++) {
                        var item = list[i];
                        if (item.company == data.company) {
                            isHasItem = true;
                            //修改处理--这种方式不会触发视图更新,针对于非双向绑定的model值,例如startDate,endDate 的文本框没有设置双向绑定
                            // item.company = data.company;
                            // item.post = data.post;
                            // item.startDate = data.startDate;
                            // item.endDate = data.endDate;

                            _this.$set(_this.postlist,i,data);
                            console.info(item);
                        }
                    }
                    if (isHasItem == false) {
                        list.push(data);
                    }

 

 

更多:

在vue中使用echarts的自定义主题

Vue Element表单绑定(四)常用操作整理

Muse-UI +Vue2.0框架开发环境搭建

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部