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.

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.

• javascript
• jquery
• ecmascript-6
• vuejs2

• 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 Commented Jan 23, 2017 at 11:06

1 Answer 1

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();
});
}