Question

我有一个vue组件，我可以从api获得分页数据。

我想要做的是使用较小的分页总数更新迭代列表...因此在我的vue组件模板中

<td v-for="item in listItems">......
</td>

并在脚本中

    {
  data (){ return { items:[]; pageSize:5, page:1 } // items is 20 in total; pageSize is 5 per page
  computed :{
    listItems: function(){ 
      var arr = [];
      while (i < this.pageSize) { 
        arr.push(this.items[i + (this.page * this.pageSize)]); 
       i++;
      } 
      return arr ;
      } 
    }, 
    methods:{ 
        getDATA: function(){ this.$http.get().then(response => {
                  this.items = response.data.data; // array of data objects
              }); 
          }
        }
  }

但是我得到一个空数组/我猜测我不能像普通数组那样迭代

Answer 1

如果我理解正确，那么这可能就是你要找的东西

export default {
  {
    data () { 
      return { 
        items: [],
        page: 1,
        pageSize: 1
      }
    },
    computed: {
      listItems() => { 
        while (i < this.pageSize) { 
          this.items[i + (this.page * this.pageSize)]; 
        }
      } 
    }
  }
}

但是我不确定你要做什么，所以这是我能用有限的信息做的最好的，看起来你正试图用计算方法设置数据，我不是100％确定你能做到......

在VueJS 2.0中迭代数据数组

1 个答案: