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