[Vuejs]-How to configure the first 3 values in v-for

by

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>

0👍

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

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,

Leave a comment