VueJs笔记

  在使用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就可以正常了

上一篇:SWT中的布局之-----FormLayout(表格式布局)


下一篇:[.net 面向对象程序设计深入](5)MVC 6 —— 构建跨平台.NET开发环境(Windows/Mac OS X/Linux)