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。不应该使用新项目集合重新呈现组件的模板吗？

或者我应该使用方法代替？ e.g。

<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;
     }
 }

如何使用新阵列更新模板？我需要实现观察者吗？关于计算数据？或者偏移会吗？

更新：

我试图通过竞争来实现分页，而我得到模板来渲染前5个...在尝试重新渲染后更新偏移不会触发.... arr似乎即使我在第二页并且offset尚未到达itemsData.length

，我也会返回空

您可以遍历模板的数据数组属性OUTSIDE吗？即循环通过this.itemsData[i]或this.$data.itemsData[i] ???

Answer 1

您需要在代码中进行以下更改：

public void paintComponent(Graphics ob) {
    super.paintComponent(ob);
    Graphics2D g1 = (Graphics2D) ob;
    String rep = ??? //This variable should equal the value of toRepaint
}

从documentation可以看出，slice接受两个参数start和end，它会将一个数组的一部分返回到一个从头到尾选择的新数组对象（end not included）。

VueJs 2.0中的反应性计算数据

1 个答案: