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

Question

What I'm trying to achieve is this: I have a parent component in which I need to display 4 items of image+name of a client. I have a list of about 26 clients (name and url to the logo), and I need to display only 4 at a time, and autogenerate the necessary childrens.

I have problems trying to achive a clean code for this, can someone give me some pointers on how to achieve that? Thanks in advance!

tldr: How can I let vue know that it must add a new v-window-item after 4 iterations of client data.

edit: adding example

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

Here I get all the divs together, in one v-window-item. I would need to generate +1 v-window-item every 4 divs, so I display only 4 at the time.

Related: https://stackoverflow.com/questions/46622209/how-to-limit-iteration-of-elements-in-v-for - "display 4 at the time" without any logic? (Randomize) — Ezra Siton, Apr 26 '20 at 04:19

score 0 · Answer 1 · answered Jul 24 '20 at 23:11

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>

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

1 Answers1