Vue: when use vue2.0 and bootstrap-datepicker, and use v-model can not get the date value.

[15992033543]

https://jsfiddle.net/gLfesj48/

[fnlctrl]

Hi, thanks for filling this issue. Please follow the Issue Reporting Guidelines and provide a live reproduction on jsfiddle, codepen etc. Thanks!

[yyx990803]

The fiddle isn't working, but it's most likely due to bootstrap-datepicker only triggering a jQuery change event instead of a real change event.

[Xelia]

I use bootstrap datepicker with vue like this: https://jsfiddle.net/3a2055ub/

[yyx990803]

This is a wontfix for 2.0. Although we catered for it in 1.x, I don't think it makes sense for us to cater for the behavior of arbitrary 3rd party libraries - especially when there's a workaround like @Xelia's.

[granda]

Sorry to tack onto a closed issue, but it's context related.

@yyx990803 Is using $("#startDate") the optimal way to target an element within mounted()? Should we be using something similar to refs like in React?

Example:

const app = new Vue({
  el: '#app',
  data: {
    startDate: '',
  },
  mounted() {
    $('#startDate').datepicker().on(
      'changeDate', () => { this.startDate = $('#startDate').val() }
    )
  }
})

[simplesmiler]

@granda there is ref (v-ref in 1.0) exactly for that purpose. It's sufficient most of the time, but not always.

[sinaza]

After making the datepicker work I ran into another issue that is worth noting. I don't wanna see anyone suffer like I did!

So here is the situation, the application has a button that makes something true, then a v-if shows a second datepicker based on that true value. The mounted() doesn't trigger again and second datepicker shows the same weird behavior that we are discussing here! The workaround is to change v-if with v-show, so that mounted() works for it in the first place.