VueJSのシンプルな日付ピッカー

Question

コンポーネントのinputタグにdatetimepickerを作りたいと思います。私は、ブートストラップ・datetimpickerを実装しているが、私はここにコンポーネントのメソッド（ に入力値を取得するカントの日付は一例で選択したとき：https://jsfiddle.net/ma9sgnd8/1/

new Vue({ 
    el: '#app', 
    data: { 
    date: '' 
    }, 
    mounted: function() { 

     var args = { 

      format: 'MM/DD/YYYY' 
     }; 
     this.$nextTick(function() { 
      $('.datepicker').datetimepicker(args) 
     }); 

     this.$nextTick(function() { 
      $('.time-picker').datetimepicker({ 
      format: 'LT' 
      }) 
     }); 
    } 
}) 

Answer 1

がVUE判明

<div id="app"> 
    <div> 
    <input type="date" v-model="date"> 
    </div> 
    {{date}} 
</div> 

（または外部のパッケージhttps://github.com/charliekassel/vuejs-datepickerなど）：およびPROB正しく状態を更新しない、デフォルトの1を試してみてくださいjsオブジェクトのvalueを監視するのではなくdomノードのntを返します（document.querySelector()程度までjsオブジェクトが存在しないため、これは妥当です）。証拠：in the docは、.lazy修飾子をに、の代わりにchangeイベントを聞くことができます。したがって、jQueryベースのブートストラップ・プラグインが入力のvalueをjsに変更すると、vueはそれを検出しません。

幸いにも

、プラグインprovides a change event、その変更イベントが発生し、我々は手動ビューモデルのプロパティを設定することができます。https://jsfiddle.net/ma9sgnd8/4/

Answer 2

問題では、コンソールで見れば、それはクラッシュし、あなたの日付ピッカーであります。input前夜に耳を傾け