Flatpickr не повторный рендеринг с вычисленными реквизитами (VueJs) - PullRequest
Новая
       19

Flatpickr не повторный рендеринг с вычисленными реквизитами (VueJs)

0 голосов
/ 23 января 2019

В моем компоненте есть два сборщика листов.Я должен изменить вторую дату, когда первая была изменена, но пользователь может изменить вторую дату вручную. 

<template>
    <default-field :field="field" :errors="errors">
        <template slot="field">

            <flatpickr
                v-model="dateStart"
                id="championshipDateStart"
                name="championshipDateStart"
                :placeholder="placeholder"
                :options="optionsStart"
                :value="dateStart"
            >
            </flatpickr>

            <flatpickr
                v-model="dateEnd"
                id="championshipDateEnd"
                name="championshipDateEnd"
                :placeholder="placeholder"
                :options="optionsEnd"
                :value="dateEndValue"
            >
            </flatpickr>

        </template>
    </default-field>
</template>

Если пользователь меняет первую дату, вторая дата должна быть первой датой + 3 дня. 

changeDateStart(event){
    this.dateEndValue = moment(new Date(this.dateStart)).add(3, 'day').format('YYYY-MM-DD');
}

Я пытался использовать вычисленные реквизиты для повторного рендеринга второго flatpicker, но ничего не происходит.

есть мои вычисленные реквизиты 

computed: {
    placeholder(){
        return moment().format('YYYY-MM-DD');
    },

    optionsStart(){
        return {
            altInput: true,
            altFormat: "Y-m-d",
            allowInput: true,
            altInputClass: "w-1/3 mt-3 form-control form-input",
            onChange: this.changeDateStart()
        };
    },

    optionsEnd(){
        return {
            altInput: true,
            altFormat: "Y-m-d",
            allowInput: true,
            altInputClass: "w-1/3 mt-3 form-control form-input",
        };
    },

    dateEndValue:{
        get: function(){
           return this.dateEnd;
        },
        set: function(newDate){
            this.dateEnd = newDate;
        }
    }
},

Самое странное, что я вижу изменения в vue-devtools (http://joxi.ru/nAynW7asggRNzr)

Я использую эту библиотеку (https://www.npmjs.com/package/vue-flatpickr)

1 Ответ

0 голосов
/ 23 января 2019

Я бы сделал это с помощью часов на dateStart: 

watch : {
  dateStart (newV, oldV) {
    newDate = new Date(newV)
    this.dateEnd = newDate.setDate(newDate.getDate() + 3)
  }
}

Нет необходимости в вычисляемых свойствах.Если dateStart изменяется, dateEnd будет изменен.Если dateEnd изменен, больше ничего не меняется.

https://jsfiddle.net/3x491mwr/

...