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

因为 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框架开发环境搭建

转载于:https://my.oschina.net/tianma3798/blog/3063312

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值