Update data value with Vue from jQuery onChange

Question

I'm using bootstrap-date-picker with Vue.js 2. Bootstrap datepicker doesn't update the model.

But if I use the following script, I cannot access the scope to use this

loadFormProps() {
// init other stuff
$('#founding_date').change(function() {
  this.founding_date = $(this).val();
});
}

Modal is as following:

data() {
  return {
    founding_date: '01 - 01 - 2017',
  }
};

What will be the best solution for this, as I cannot get vm.$data working, and I cannot access this within the function.

You have two this inside the change callback function. Which this is not accessible? What is the console error message? What should the first this refer to? — gus27
– gus27, Commented Jan 23, 2017 at 11:06

Saurabh · Accepted Answer · 2017-01-23 11:17:39Z

8

You have to save the this inside some other var before the onchange JS block:

loadFormProps() {
// init other stuff
var that = this  
$('#founding_date').change(function() {
  that.founding_date = $(this).val();
});
}

answered Jan 23, 2017 at 11:17

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

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

1 Comment

Was it that easy? Thank you sir!