@p3trukh1n
NooB IN WeB

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

Делаю калькулятор с помощью 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>
  • Вопрос задан
  • 157 просмотров
Пригласить эксперта
Ответы на вопрос 1
kulakoff
@kulakoff Куратор тега Vue.js
Vue.js developing
Вам нужно добавить обратную связь для полей, которые вы меняете, чтобы вызвать обновление и компонента. В вашем варианте вот так должно заработать:
<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">
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы