如何遍历VueJS中的项目列表

Question

Here is my vue instance:

new Vue({
    el: '#app',
    data: {
      showPerson: true,
      persons:
        [
          {id: 1, name: 'Alex'},
          {id: 2, name: 'Bob'},
          {id: 3, name: 'Chris'}
        ],
    },
    methods: {
      nextPerson: function(){
        this.showPerson = false;
      }
    }
  });

I am trying to walk the persons array of objects. I want the list to start with the first element of the array and below it should be a button which is responsible for hiding the previous element and showing the next element of the array. Once the user reaches the last element, the Next button should not go back to the first element.

Here is the HTML:

<div id="app">
  <ul v-for="person in persons">
    <li v-if="showPerson">{{person.name}}</li>
  </ul>
  <button @click="nextPerson">Next Person</button>
</div>

And the JSBin Link. At this moment I can only show and hide the items all at once and not one at a time. How can I implement this?

Answer 1

One of the ways of doing so would be to keep an index for the person being shown on screen. I've named this variable as shownPersonIndex .

Then, you need to show the next person on click of button. So in the click event handler, you need to increment the index by 1. Also, you need to ensure that the index value does not exceed the length of the array. So I've modified the click handler as follows:

nextPerson: function() {
  if(this.shownPersonIndex < (this.persons.length - 1)) {
    this.shownPersonIndex++;
  }
}

Finally, you can either use a computed to display the currently shown person or an inline expression like this.persons[this.shownPersonIndex].name to show the person on screen.

I am using v-if="this.shownPersonIndex != this.persons.length - 1" to hide the "next" button as you reach the last element on the array.

 new Vue({ el: '#app', data: { shownPersonIndex: 0, persons: [{ id: 1, name: 'Alex' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Chris' } ], }, methods: { nextPerson: function() { if(this.shownPersonIndex < (this.persons.length - 1)) { this.shownPersonIndex++; } } }, computed: { shownPerson: function() { return this.persons[this.shownPersonIndex]; } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script> <div id="app"> Person: {{ shownPerson.name }} <button v-if="this.shownPersonIndex != this.persons.length - 1" @click="nextPerson">Next Person</button> </div>