Менять значение props?

Question

[fessss]

<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 в дочернем компоненте, что не правильно.
Каким образом мне реализовать данный фукнционал?

Answer 1

[Олег Колтунов]

selectDaysRange(days) {
      this.selected = [];
      const endDate = moment(this.now).subtract(days, 'days').format('YYYY-MM-DD');
      this.selected.push(endDate, this.startDate);
},

Comments

[fessss]

так, к сожалению, не работает

[Олег Колтунов]

что пишет?

[fessss]

Олег Колтунов, Ошибок нет, просто пусто

[Олег Колтунов]

Попробуйте формат 'YYYY-mm-dd' для startDate и endDate

[Олег Колтунов]

У меня работает
https://codepen.io/iolega/pen/xxExeVo

Answer 2

[0xD34F]

methods: {
  selectDaysRange(days) {
    this.selected = [
      moment(this.now).subtract(days, 'days').format('YYYY-MM-DD'),
      this.startDate,
    ];
  },
},

Comments

[fessss]

Спасибо!