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

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>

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

Leave a comment