VueJs筆記

　　在使用Vuejs做開發(fā)的過程中，偶爾會遇到，動態(tài)給data添加一個屬性這個屬性確不能被動態(tài)監(jiān)聽到，只能用this.$set(prop,'prop',val)來強制監(jiān)聽，但是有些情況下又不需要這樣操作。舉個例子，頁面點查詢按鈕之后，加載一個applyList數(shù)組，然后遍歷數(shù)組給各個元素動態(tài)加一個默認屬性:isShow=false。如果是直接在ajax獲取到數(shù)據(jù)，將這個沒處理的數(shù)據(jù)直接賦值給data則，這個isShow就不會被watch到。如果是處理完畢之后再將處理的結(jié)果賦值給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);
                }
            })

　　上面這種做法，就會導致動態(tài)添加的屬性“isShowFull”沒有動態(tài)綁定，下面這種做法才是正確的，即處理完數(shù)據(jù)之后再賦值。

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

posted @ 2017-05-23 14:08 冰深閱讀(410) 評論(0) 收藏舉報

刷新頁面返回頂部

冰深

還是等等看吧~

VueJs筆記

強制重新渲染列表

公告