Below is the Vue instance I have created:
new Vue({
el: '#app',
data: {
showPerson: true,
persons:
[
{id: 1, name: 'Alice'},
{id: 2, name: 'Barbara'},
{id: 3, name: 'Charlotte'}
],
},
methods: {
nextPerson: function(){
this.showPerson = false;
}
}
});
I am aiming to iterate through the array of objects called persons. The list should begin with the first element and below it, there should be a button that toggles between hiding the current element and showing the next one in the array. Once the user reaches the last element, clicking the Next button should not cycle back to the first element.
Here is the corresponding HTML code:
<div id="app">
<ul v-for="person in persons">
<li v-if="showPerson">{{person.name}}</li>
</ul>
<button @click="nextPerson">Next Person</button>
</div>
You can also view the complete example on JSBin here. Currently, I can only toggle all items at once instead of one by one. How should I approach implementing this functionality?