How to get property evaluated each time you change fields?

Make a calculator using Vue.JS
It is necessary to calculate the difference in dates.
But, of course, the code you see below, it executes only the first time when booting.
How to make every time you change one of the dates this property was converted?

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="date of entry" :value="date.enterDate">
 <input type="text" class="date-input calc input calc-leavedate" placeholder="departure date" :value="date.leaveDate">
 <input type="text" class="date-input calc input calc-dayscount" placeholder="departure date" :value="getDifference(date.enterDate, date.leaveDate)">
</div>
 </div>
March 23rd 20 at 19:19
1 answer
March 23rd 20 at 19:21
You need to add feedback for the fields that you change to cause update and component. Your option like this should work:
<input type="text" class="date-input calc input calc-enterdate" placeholder="date of entry" v-model="date.enterDate">
<input type="text" class="date-input calc input calc-leavedate" placeholder="departure date" v-model="date.leaveDate">
Do you think we should replace v-bind to the input fields on the v-model?
No, nothing has changed.
I think that the variable itself is changing just
<input type="text" class="calc-input" placeholder="date difference" :value="getDifference(date.enterDate, date.leaveDate)">

Not previouslies.
___
By the way, tried 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="date difference" :value="differences[index]">
- v-model is also computed with probowl
Still, it did not happen - Katheryn.Hilll commented on March 23rd 20 at 19:24
@Katheryn.Hilll, Hey, it's your example should work: https://codepen.io/kerf/pen/GaaGwQ When you use v-model is a change of facility dates when you change the corresponding fields and because he is reactive and is used in the template, then the template rerender and, accordingly, your function is called getDifference. - reyna.Torp commented on March 23rd 20 at 19:27
@reyna.Torp, Yes, it works.
It turned out that it didn't work purely because of the fact that the date I picked using jQueryUI-DataPicker.
how can they to integrate? - Katheryn.Hilll commented on March 23rd 20 at 19:30
@Katheryn.Hilll, I would rather get some thread ready implementation of datepicker to view, well, or need to wrap qjuery in picker view component and learn how to get out of it when you change. - reyna.Torp commented on March 23rd 20 at 19:33

Find more questions by tags Vue.jsJavaScript