[Vuejs]-How to display fixed number of elements of v-for inside v-window

by

0👍

You can do it this way:

First divide the array of items into chunks of 4 in a computed property

  data: {
    items: [],
  },
  computed: {
    chunks() {

      let chunk_size = 4
      let items = this.items

      return Array(Math.ceil(items.length / chunk_size))
              .fill()
              .map((_, index) => index * chunk_size)
              .map((begin) => items.slice(begin, begin + chunk_size));
  }

Then iterate like this:

    <v-window>
      <v-window-item v-for="(item,i) in chunks" :key="i">
        <div v-for="n in item" :key="`div-${n}`>
          <v-image src="n.url"></v-image> 
          <p>{{n.title}}</p>
        </div>
      </v-window-item>
    </v-window>

Leave a comment