<template>
<v-dialog
ref="menu1"
v-model="menu1"
max-width="415"
min-width="290"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="formatText"
v-on="on"
label="Выберите дату"
color="primary"
/>
</template>
<div class="d-flex">
<v-date-picker
v-model="selected"
no-title
range
header-color="primary"
color="primary"
>
<v-spacer></v-spacer>
<v-btn
text
@click="menu1 = false"
>
ок
</v-btn>
</v-date-picker>
<div
v-if="showBtns"
class="datepicker__btns d-flex flex-column align-baseline">
<v-btn text color="primary" @click="selectDaysRange(7)">За неделю</v-btn>
<v-btn text color="primary" @click="selectDaysRange(30)">За месяц</v-btn>
<v-btn text color="primary" @click="selectDaysRange(365)">За год</v-btn>
</div>
</div>
</v-dialog>
</template>
<script>
import moment from 'moment';
export default {
name: 'CustomDatePicker',
props: ['showBtns', 'value'],
data() {
return {
menu1: null,
dates: [],
newValue: this.value,
now: new Date(),
startDate: moment(this.now).format('YYYY-MM-DD'),
};
},
computed: {
formatText() {
const arr = [];
this.value.map((date) => arr.push(moment(date).format('DD.MM.YYYY')));
return arr.join(' - ');
},
selected: {
get() {
return this.value;
},
set(val) {
this.$emit('input', val);
},
},
},
methods: {
selectDaysRange(days) {
this.value= []; //вот тут ошибка, потому что пытаюсь напрямую менять props
const endDate = moment(this.now).subtract(days, 'days').format('YYYY-MM-DD');
this.value.push(endDate, this.startDate);
},
},
};
</script>
Есть компонент на основе vuetift v-date-picker
Пытаюсь добавить функционала для выбора даты "За месяц, за год"
Но при вызове метода выдает ошибку, что пытаюсь менять значение vue в дочернем компоненте, что не правильно.
Каким образом мне реализовать данный фукнционал?
