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

更新日期: 2018-09-06 阅读次数: 353 分类: 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年09月22日 世界无车日
2018年09月23日 秋分
2018年09月23日 国际聋人节
2018年09月24日 中秋节
2018年09月27日 世界旅游日
2018年10月01日 国庆节
2018年10月04日 世界动物日
2018年10月08日 寒露
2018年10月09日 世界邮政日
2018年10月10日 辛亥革命纪念日
2018年10月13日 中国少年先锋队诞辰日
2018年10月14日 世界标准日
查看更多节日