在使用Vuejs做开发的过程中，偶尔会遇到，动态给data添加一个属性这个属性确不能被动态监听到，只能用this.$set(prop,'prop',val)来强制监听，但是有些情况下又不需要这样操作。举个例子，页面点查询按钮之后，加载一个applyList数组，然后遍历数组给各个元素动态加一个默认属性:isShow=false。如果是直接在ajax获取到数据，将这个没处理的数据直接赋值给data则，这个isShow就不会被watch到。如果是处理完毕之后再将处理的结果赋值给data则就正常了。
return VueDataService.getMyApprovalList(request).then((res) => {
if (res.data.MessageCode == BPMUtil.enums.ErrorCodeEnums.OK) {
//this.applyList是data下的一个属性
this.applyList = res.data.Data;
_.forEach(tmp, function (v, k) {
//this.$set(v, "isShowFull", false);
v.isShowFull = false;
v.approveUserListObj = this.getProcessedUsers(v.ApproveUserInfo);
}, this);
} else {
throw new Error(res.data.MessageText);
}
})
上面这种做法，就会导致动态添加的属性“isShowFull”没有动态绑定，下面这种做法才是正确的，即处理完数据之后再赋值。
return VueDataService.getMyApprovalList(request).then((res) => {
if (res.data.MessageCode == BPMUtil.enums.ErrorCodeEnums.OK) {
var tmp = res.data.Data;
_.forEach(tmp, function (v, k) {
//this.$set(v, "isShowFull", false);
v.isShowFull = false;
v.approveUserListObj = this.getProcessedUsers(v.ApproveUserInfo);
}, this);
this.applyList = tmp;
} else {
throw new Error(res.data.MessageText);
}
})
强制重新渲染列表
强制重新渲染，可以使用v-bind:key，不过这个应用在template标记上会不起作用，如
<template v-for="action in batchApproveData.actions" v-bind:key="batchApproveData.uniqueId">
<label class="batchApproveLabel" v-bind:class="{'span4':batchApproveData.actions.length==3,'span6':batchApproveData.actions.length==2,'span10':batchApproveData.actions.length==1}">
<input type="radio" v-icheck class="m-wrap span4" name="optionsRadios" v-on:click="batchApproveData.selectedAction=action.ActionValue" v-bind:value="action.ActionValue">{{action.ActionName}}
</label>
</template>
这个地方用了template标记，列表并不会因为key变化而重新渲染，换成div就可以正常了