vuejs button click to next date - vuejs2

Question

I want to print the date on the input according to the number of days of the button when the buttons are clicked with vue js.
For example: Clicking the 7 Day Button
I want "30.08.2021" to be written.
<template>
<div>
<div class="btn-group">
<button #click="getDate(1)" class="btn">TODAY</button>
<button #click="getDate(7)" class="btn">7 DAY</button>
<button #click="getDate(14)" class="btn">14 DAY</button>
<button #click="getDate(30)" class="btn">30 DAY</button>
<button #click="getDate(45)" class="btn">45 DAY</button>
<button #click="getDate(60)" class="btn">60 DAY</button>
</div>
<div>
<input v-model="data.date">
</div>
</div>
</template>
<script>
export default {
data() {
return {
data: {
date: "",
}
}
},
methods: {
getDate: function (day) {
var timeFrom = (day) => {
var dates = [];
for (let I = 0; I < Math.abs(day); I++) {
dates.push(new Date(new Date().getTime() - ((day >= 0 ? I : (I - I - I)) * 24 * 60 * 60 * 1000)).toLocaleString());
}
return dates;
}
return console.log(timeFrom(day));
},
}
}
</script>

Answer 1

Right now you are just creating an array of dates, you need to create one date and then use that value in your template.
<template>
<div>
<div class="btn-group">
<button #click="getDate(1)" class="btn">TODAY</button>
<button #click="getDate(7)" class="btn">7 DAY</button>
<button #click="getDate(14)" class="btn">14 DAY</button>
<button #click="getDate(30)" class="btn">30 DAY</button>
<button #click="getDate(45)" class="btn">45 DAY</button>
<button #click="getDate(60)" class="btn">60 DAY</button>
</div>
<div>
<input v-model="data.date" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
data: {
date: "",
},
};
},
methods: {
getDate(days) {
const now = new Date();
const tmpDate = now.setDate(now.getDate() + days);
const newDate = new Date(tmpDate);
this.data.date = newDate.toDateString()
},
},
};
</script>