Как заставить свойство вычисляться каждый раз при изменении полей?

Question

[p3trukh1n]

Делаю калькулятор с помощью Vue.JS
Необходимо высчитать разницу в датах.
Но, естественно, код, который вы видите ниже, выполняет ее только первый раз, при загрузке.
Как сделать, чтобы каждый раз при изменении одной из дат это свойство пересчитывалось?

var vue = new Vue({
    el: '#calc',
    data: {
        dates: [{
            enterDate: '6.6.2019',
            leaveDate: '7.6.2019'
        }]
    },
    methods: {
        getDifference(date1, date2) {
            var d1 = date1.split('.'),
                d2 = date2.split('.');
            d1 = new Date(`${d1[1]}-${d1[0]}-${d1[2]}`);
            d2 = new Date(`${d2[1]}-${d2[0]}-${d2[2]}`);
            return Math.ceil(Math.abs(d2.getTime() - d1.getTime()) / (1000 * 3600 * 24));
        }
    }
})

<div id="calc">
        <div class="input-row" v-for="(date,index) in dates" :key="index">
            <input type="text" class="date-input calc-input calc-enterdate" placeholder="Дата въезда" :value="date.enterDate">
            <input type="text" class="date-input calc-input calc-leavedate" placeholder="Дата выезда" :value="date.leaveDate">
            <input type="text" class="date-input calc-input calc-dayscount" placeholder="Дата выезда" :value="getDifference(date.enterDate, date.leaveDate)">
        </div>
    </div>

Comments

[Алексей Скляров]

прописать computed свойство

[Одиночка Айс]

гуглить умеем? https://forum.vuejs.org/t/how-to-trigger-an-onchan...

[p3trukh1n]

Алексей Скляров, я пробовал, но у меня не получилось внедрить его в html.

[p3trukh1n]

computed: {
        differences() {
            var result = [];
            for (i of this.dates) {
                result.unshift(this.getDifference(i.enterDate, i.leaveDate));
            }
            return result;
        }
}

Я попробовал сделать равный по индексам массив через computed, но все равно ничего не вышло

Answer 1

[Evgeny Kulakov]

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

<input type="text" class="date-input calc-input calc-enterdate" placeholder="Дата въезда" v-model="date.enterDate">
<input type="text" class="date-input calc-input calc-leavedate" placeholder="Дата выезда" v-model="date.leaveDate">

Comments

[p3trukh1n]

Вы думаете, стоит заменить v-bind в полях для ввода на v-model?
Нет, ничего не изменилось.
Я думаю, что сама переменная-то меняется, просто

<input type="text" class="calc-input" placeholder="Дата разницы" :value="getDifference(date.enterDate, date.leaveDate)">

Не перевычисляется.
___
Кстати, попробовал computed

computed: {
        differences() {
            var result = [];
            for (i of this.dates) {
                result.unshift(this.getDifference(i.enterDate, i.leaveDate));
            }
            return result;
        }
    },

<input type="text" class="calc-input" placeholder="Дата разницы" :value="differences[index]">

- здесь v-model тоже пробовел с computed
Все равно, не получилось

[Evgeny Kulakov]

p3trukh1n, смотрите, это же ваш пример, должно работать: https://codepen.io/kerf/pen/GaaGwQ Когда вы используете v-model происходит изменение объекта dates при изменении соответствующих полей и так как он реактивный и используется в шаблоне, то происходит ререндер шаблона и соответственно вызывается ваша функция getDifference.

[p3trukh1n]

Evgeny Kulakov, Да, работает.
Оказалось, что он не работал чисто из-за того, что дату я выбирал через jQueryUI-DataPicker.
как можно их с-интегрировать?

[Evgeny Kulakov]

p3trukh1n, я бы лучше взял какую-нить готовую реализацию датапикера для вью, ну или нужно обернуть qjuery picker во вью компонент и научиться получать из него при изменении.