How can I get the next 6 days in a v-for loop in Vue3?

Question

I have a specific date that I am wanting to then get the next 6 days (to have a week ahead type of component) for. I am thinking I can just have my initial date and then do a v-for range loop like:

<span v-for="n in 7">{{ n }}</span>

where the first element would be the passed-in date. But I am not exactly sure what the best way to achieve this would be?

Answer 1

It's possible to calculate the next 7 dates directly within the <template>:

<span v-for="n in 7">{{ new Date().setDate(new Date().getDate() + n) }}</span>

demo 1

Alternatively, you could move that into <script> to declutter the <template>:

<script setup>
const today = new Date()
const nextSevenDays = Array(7).fill().map((_, i) => new Date(today).setDate(today.getDate() + i))
</script>

Then update the v-for to render it:

<template>
  <span v-for="date in nextSevenDays">{{ date }}</span>
</template>

demo 2