DEV Community

Lucky Adogun (ZenCoder)
Lucky Adogun (ZenCoder)

Posted on

How to loop through an array with a range in VueJS

Imagine you have an array with 10 items and wanted to divide it up into a set of five's to fit with your design objective.

Several common solutions to this problem I've seen in the wild include:

  1. Hard-coding the solution
  2. Creating two separate arrays

So, here's a simpler and better solution to do it with one array in VueJS:

<p 
    v-for="(item, index) in yourArray.slice(start, end)" 
    :key="index">

    {{ item.topic }}
</p>
Enter fullscreen mode Exit fullscreen mode

The best thing about this solution is, you can dynamically set the start and end values, for example, using inputs from the user.

Hope that helps, cheers!

Top comments (0)