0👍
✅
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>
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>
Source:stackexchange.com