坑:Vue 动态添加的数据属性,双向绑定渲染异常

更新日期: 2018-09-06 阅读次数: 1050 分类: VueJS

代码示例,使用 element ui 的 el-table, 将返回的数据列表,逐行渲染到 table row 上,每行可以编辑 staffs 字段,即用 el-select v-model 绑定了 staffs 字段。

<template slot-scope="scope">
   <el-select v-model="scope.row.staffs" multiple
...

问题的现象是,数据在初始化之后,可以正确的渲染到视图上,但是后续修改的内容没有同步渲染到视图上。

有问题的代码。

var that = this;

$.ajax({
	method: "GET",
	url: "get_all_sites",
}).done(function( msg ) {
	that.sites = msg.data;

	for (var i = 0, len = that.sites.length; i < len; i++) {
		if (SOME_LOGIC)
			that.sites[i]['staffs'] = [1, 2];
		} else {
			that.sites[i]['staffs'] = [];
		}
	}
});

后来查到,如果在数据实例创建之后添加新的属性到数据实例上,它不会触发视图更新。。。

所以,解决方案就是,初始化时,就将新属性默认添加上,不要初始化之后再动态添加新属性。

var that = this;

$.ajax({
	method: "GET",
	url: "get_all_sites",
}).done(function( msg ) {
	sites = msg.data;

	for (var i = 0, len = sites.length; i < len; i++) {
		if (SOME_LOGIC)
			sites[i]['staffs'] = [1, 2];
		} else {
			sites[i]['staffs'] = [];
		}
	}

	that.sites = sites;
});

修改之后一切正常了。

爱评论不评论

近期节日

2018年11月17日 国际大学生节
2018年11月20日 国际儿童日
2018年11月21日 世界问候日
2018年11月22日 小雪
2018年11月22日 感恩节
2018年12月01日 世界艾滋病日
2018年12月03日 国际残疾人日
2018年12月07日 大雪
2018年12月09日 "一二九"运动纪念日
2018年12月09日 世界足球日
2018年12月10日 世界人权日
2018年12月12日 西安事变纪念日
查看更多节日