Observe Change in Vue js model when input updated by javascript function

Question

I am using Date Range Picker to select to dates now when I select the dates, I update the inputs with dates value respectively.

The inputs I have binded with v-model and created a function in watch attribute of component to observe the change in model.

But when the inputs are updated with the javascript function no change can be observed in the model but the value of my input fields are updated.

// My Input Fields

<input type="text" name="updateStartDate" v-model="updateDateRange.start">
 <input type="text" name="updateEndDate" v-model="updateDateRange.end">



//My javascript Function
$('input[rel=dateRangePickerX]').daterangepicker({
                        'autoApply': true,
                        'drops': 'up',
                        'startDate': moment().add(90, 'days').calendar(),
                        'endDate': moment().add(97, 'days').calendar(),
                        locale: { cancelLabel: 'Clear' }
                    },
                    function (start, end, label) {
                        $('input[name="updateStartDate"]').val(start.format('MM/DD/YYYY'));
                        $('input[name="updateEndDate"]').val(end.format('MM/DD/YYYY'));
                    });

// My watch attribute in Component
watch : {
        'updateDateRange.end' : function (val) {
            console.log('In Watch Function');
            console.log(this.dateRanges);
            if(val != '' && this.updateDateRange.start != '' && this.updateDateRangeIndex != ''){
                console.log(val);
                console.log(this.updateDateRange.start);
                console.log(this.updateDateRangeIndex);
                this.dateRanges[this.updateDateRangeIndex] = this.updateDateRange;
                this.updateDateRangeIndex = '';
                this.updateDateRange.start = '';
                this.updateDateRange.end = '';
                console.log(this.dateRanges);
            }
        }
    }

You may need to force a change event: $('input[name="updateStartDate"]').val(start.format('MM/DD/YYYY')).change() — Roy J
– Roy J, Commented Oct 5, 2016 at 14:23
@RoyJ I tried to force but it didn't help. actually the model is updated when we touch the input field. — Sushant Yadav
– Sushant Yadav, Commented Oct 6, 2016 at 4:30

Primoz Rome · Accepted Answer · 2016-10-06 10:56:04Z

5

I don't like to mix jQuery and Vue because jQuery messes up the DOM. Even more, I find it completely unnecessary.

Simple only with native Vue you can do it like this:

<input type="text" name="updateStartDate" v-model="startDate" @input="onInput()">
<input type="text" name="updateStartDate" v-model="endDate" @input="onInput()">

methods: {
   onInput(e): function () {
      // this will be called on change of value
   }
}

Further to set the value and update the DOM simply update startDate and/or endDate variables and DOM will update accordingly.

answered Oct 6, 2016 at 10:56

Primoz Rome

11.1k19 gold badges83 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Roy J · Accepted Answer · 2016-10-06 10:41:01Z

0

You need to work with your model and not fiddle with the bound DOM element. You have bound the elements to viewmodel items:

<input type="text" name="updateStartDate" v-model="updateDateRange.start">
<input type="text" name="updateEndDate" v-model="updateDateRange.end">

then you use jQuery to set the field values

$('input[name="updateStartDate"]').val(start.format('MM/DD/YYYY'));
$('input[name="updateEndDate"]').val(end.format('MM/DD/YYYY'));

but you should be setting the bound values instead:

updateDateRange.start = start.format('MM/DD/YYYY');
updateDateRange.end = end.format('MM/DD/YYYY');

answered Oct 6, 2016 at 10:41

Roy J

44k10 gold badges84 silver badges106 bronze badges

Collectives™ on Stack Overflow

Observe Change in Vue js model when input updated by javascript function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related