0

How to start a v-for loop

Example A array given :

array = [dog,cat,e,f,g];

I want use v-for loop which will start looping take the first 3 value.

Thank you.

Avishek Bhattacharya
  • 6,534
  • 3
  • 34
  • 53
PD Chanel
  • 11
  • 5
  • I think the answer that you are looking for is there https://stackoverflow.com/questions/46622209/how-to-limit-iteration-of-elements-in-v-for – emman Jul 28 '18 at 15:09
  • 2
    Possible duplicate of [How to limit iteration of elements in V-for](https://stackoverflow.com/questions/46622209/how-to-limit-iteration-of-elements-in-v-for) – Dawid Zbiński Jul 28 '18 at 15:17

3 Answers3

0

Try adding a v-if statement that checks if the index of the element is less than 3.

Sean Dvir
  • 301
  • 4
  • 15
0

You can use a computed property that returns the first 3 elements of the array.

new Vue({
  el: "#app",
  template: '<ul><li v-for="item of subArray">{{ item }}</li></ul>',
  data: {
    array: ["one", "two", "three", "four", "five"]
  },
  computed: {
    subArray(){ return this.array.slice(0,3) }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app"></div>
pishpish
  • 2,574
  • 15
  • 22
0

Just use the built-in index feature

<template v-for="(element, index) in array">
  <p v-if="index <= 3">[[ index ]]</p>
</template>

and you're done,

VengaVenga
  • 680
  • 1
  • 10
  • 13