[Vuejs]-Vue: how to set props to an array range?

by

0👍

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?.

Leave a comment