無計算數據2.0

Question

我具有從HTTP響應的分頁記錄集，並希望進一步實現在返回分頁記錄集客戶端分頁，因而我有以下組分的標記

<td v-for="item in items">....</td> // only print 5 at a time 

，並在默認....

{ 
data: { return { 
    itemsData:[] // populated from RESTful data in increments of 20 
    , offset: 0 // for internal pagination 
     } }, 
computed: { 
    items: function(){ 
    return this.itemsData.slice(this.offset, 5); // re-populate over time as offset changes 
    } 
}, 
methods: { 
    getItems: function() { 
    this.$http.get('/api/items/?page=' + this.page).then(response=>  
    { 
     this.itemsData = response.data.data; // json array and I al get back meta data 
     // for which i use in a mixin to calculate offset and page etc. 
     // for both client side and server side pagination 
     }) // fetches records 20 at a time 
    } 

} .........

如果填充itesmData然後offset是d年輕化。不應該使用新的項目集合重新渲染組件的模板？

或者我應該使用一種方法呢？例如

<td v-for="item in paginated(itemData)">....</td> 

{ 
    .... 
    methods: { 
    paginated: function(items){ 
     var arr=[]; 
     for(var i = this.offset; i < this.offset + 5; i++) 
      arr.push(item[i]); 
     return arr; 
    } 
} 

模板將如何更新新數組？我需要實現一個觀察者嗎？在計算的數據？或者會抵消呢？

UPDATE：

我試圖通過競爭來實現分頁和更新偏移不火之後，而我得到的模板渲染的第5 .....在試圖重新渲染.... arr似乎返回空，即使我以爲我在第二頁上，offset還沒有達到itemsData.length

你可以遍歷模板的數據數組屬性OUTSIDE？即通過this.itemsData[i]或this.$data.itemsData[i]循環

Answer 1

你需要在你的代碼以下更改：

computed: { 
    items: function(){ 
    return this.itemsData.slice(this.offset, this.offset + 5); // re-populate over time as offset changes 
    } 
} 

你可以從documentation看到，切片接受兩個參數的開始和結束，它會返回一個數組的一部分進入選擇新的數組對象從開始到結束（不包括結束）。