Iterating over data array in VueJS 2.0

Question

I have a vue component for which I get paginated data from api.

What I want to do is update the iterated list using a smaller pagination total...thus in my vue component template

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

and in the script

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

but i get an empty array/ i'm guessing I can't just iterate like a normal array

Your code is incomplete or incorrect. Where do you actually return anything for listItems? — David L
– David L, Commented Nov 28, 2016 at 22:05
Please provide actual code.This thing you posted doesn't tell anything. — Belmin Bedak
– Belmin Bedak, Commented Nov 28, 2016 at 22:09
What console says ? I think you are missing this keyword on page, pageSize and items. — Belmin Bedak
– Belmin Bedak, Commented Nov 28, 2016 at 22:21

darryn.ten · Accepted Answer · 2016-11-28 22:21:01Z

1

If I understand you correctly this might be what you are looking for

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

But I'm not sure what you're trying to do so it's the best I can do with limited information, and it looks like you're trying to set data in a computed method, which I'm not 100% sure you can do...

answered Nov 28, 2016 at 22:21

darryn.ten

6,9933 gold badges50 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Belmin Bedak Over a year ago

@Kendall There is vue-paginate component, just let you know github.com/TahaSh/vue-paginate :)

Kendall Over a year ago

@Belmin tried that but was not able to implement it properly. I am using table rows...and his uses list items

Collectives™ on Stack Overflow

Iterating over data array in VueJS 2.0

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related