【问题标题】:Iterating over data array in VueJS 2.0在 VueJS 2.0 中迭代数据数组
【发布时间】:2016-11-28 21:59:47
【问题描述】:

我有一个 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
              }); 
          }
        }
  }

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

【问题讨论】:

  • 您的代码不完整或不正确。您实际上在哪里返回 listItems 的任何内容?
  • 请提供实际代码。您发布的这件事没有说明任何内容。
  • 控制台说什么?我认为您在 page、pageSize 和 items 上缺少此关键字。
  • @DavidL 我更新了问题

标签: javascript vue.js vue-component vuejs2


【解决方案1】:

如果我理解正确,这可能就是您要找的东西

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

但我不确定你想做什么,所以这是我能用有限的信息做的最好的事情,而且看起来你正在尝试在计算方法中设置数据,我不是 100%确定你能做到……

【讨论】:

  • @Kendall 有 vue-paginate 组件,让你知道github.com/TahaSh/vue-paginate :)
  • @Belmin 尝试过,但无法正确实施。我正在使用表格行......他使用列表项
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-09-28
  • 1970-01-01
  • 1970-01-01
  • 2018-10-18
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多