vuejs / vue

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core
http://v2.vuejs.org
MIT License
207.96k stars 33.67k forks source link

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

Closed 15992033543 closed 7 years ago

15992033543 commented 7 years ago

https://jsfiddle.net/gLfesj48/

fnlctrl commented 7 years ago

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

yyx990803 commented 7 years ago

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 commented 7 years ago

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

yyx990803 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

sinaza commented 6 years ago

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.