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就能夠正常了