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