Реактивные Вычисленные данные в VueJs 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

Можете ли вы перебрать свойство массива данных ВНЕШНЕГО шаблона? то есть через цикл 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, ломтик принимает два начала и конца аргумент, он возвращает часть массива в новый массив объекта, выбранного от начала до конца (конец не включен).