Vue: how to set props to an array range?

Question

I have a grid created for videos. It makes a call to an api to return back videos. I have a state isFetching that is set to true when the page loads and tries to retrieve the list from the API. After the videos are retrieved, isFetching is set to false and the data is stored as videoList.

I am using a grid with a placeholder component for each item if the API takes a while to fetch. The VideoGrid expects a items because inside of it, it iterates through it. I want to have 16 grid items but I don't want to have to do :items=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]. I tried :items="[new Array(16).keys()] but that seems to create a nested array. Is there a way to accomplish this without having to write it out like that?

Main.vue

<VideoGrid v-if="isFetching && !videoList" :items="[1,2,3,4,5,6]">
  <template>
    <ItemPlaceholder />
  </template>
</VideoGrid>

<VideoGrid v-else :items="videoList">
  <template v-slot="slotProps>
    <VideoComponent :title="slotProps.title" />
  </template>
</VideoGrid>

score 0 · Answer 1 · answered Oct 16 '21 at 07:50

You should just be able to remove the brackets from your items declaration like so:

<VideoGrid v-if="isFetching && !videoList" :items="Array(16).fill(1)">
  <template>
    <ItemPlaceholder />
  </template>
</VideoGrid>

<VideoGrid v-else :items="videoList">
  <template v-slot="slotProps>
    <VideoComponent :title="slotProps.title" />
  </template>
</VideoGrid>

Array(16).fill(1) will create an array with 16 number 1's. If you want to have incrementing values in your array you can use Array.from({length: 16}, (v, i) => i) or see How to initialize an array's length in JavaScript?.

Vue: how to set props to an array range?

1 Answers1