Vue.jsを2系にしたらdatepickerが動かなくなってしまったので困った話

今までVue.jsbootstrap-datepickerを組み合わせて使ってました。
諸々の事情があってVue.jsを1系から2系にアップデータした結果、
テキストボックスをクリックしてもカレンダーが表示されない現象が発生しました。
対応方法をブックマーク的な感じで残しておきます。

↓が今までのソースコードの抜粋(そもそもこれが駄目な可能性があるのかな)

before.html
<input type="text" id="sampleDate" v-model="sampleDate">
before.coffee
new Vue
    el: '#sampleDiv'
    data:
        sampleDate: ''
calender.coffee
$(document).on 'ready page:load', () ->
    $('#sampleDate').datepicker

まずは結果から。

after.html
<input type="text" id="sampleDate" v-model="sampleDate">
after.coffee
new Vue
    el: '#sampleDiv'
    data:
        sampleDate: ''
    mounted: ->
        $('#sapleDiv').datepicker()
        .on 'changeDate', () =>
            this.sampleDate = $('#sampleDate').val()

色々と調べてみると、

  • mountedに記載すること
  • datepickerのchangeDateを使用すること

上記の2つを使用すると正常に動作するということにたどり着いたので、
そのように記載しました。

vue-datepickerなるものも存在するのですが、
諸々の事情でそちらは使用出来ませんでした><;

[紹介元] jQueryタグが付けられた新着投稿 – Qiita Vue.jsを2系にしたらdatepickerが動かなくなってしまったので困った話

関連記事