vantjs2 v-modelネイティブのjavascript変更イベント

Question

私は、vueインスタンス内のデータ属性を更新するために、ネイティブのJavaScriptイベントを入力で発生させる方法を見つけようとしています。

だから私は、この入力持っているため、この投稿へhttps://github.com/vuejs/vue/issues/96#issuecomment-37870300

私が問題にビットを検索しています（そしてそれは私が解決策がネイティブJavaScriptのイベントであることを示唆している部分になった方法です）：

を

<input type="text" name="occurred" id="occurred" class="form-control" required="" v-model="occurred"> 

とJavaScriptを通じて、私はVUEは、V-モデルを更新できるように、それはネイティブのイベントの姿しようとしてる=（私はpickadate.jsを使用しています）、「発生しました」

$('#occurred').pickadate({ 
    format: 'dddd, dd mmm, yyyy', 
    formatSubmit: 'dd-mm-yyyy', 
    hiddenPrefix: 'prefix__', 
    hiddenSuffix: '__suffix' 
}); 

var evt = document.createEvent('HTMLEvents'); 
evt.initEvent('change', true, true); 

var el = document.getElementById("occurred"); 
el.dispatchEvent(evt); 

私はいくつかの方法で試しましたが、どのように動作するのか完全に理解できないようです。

解決策を私に説明してもらいたいのであれば、私はそれを理解したいと思っています。

私が説明するためのフィドル作成しました：https://jsfiddle.net/c1askwj2/5/

編集： ソリューションは、私が行うにはしたくないものを行うことですが。基本的にはあなたのビューオブジェクトを「公開」：

var vueFoo = new Vue({ ... }); 

あなたはvarFoo.thedateを介してアクセスし、それを設定することができるこの方法を：私は維持したいと私に

$('#thedate').pickadate({ 
    onSet: function(value) { 
    var date = new Date(value.select); 
    vueFoo.thedate = date.getDate() + '-' + date.getMonth() + 1 + '-' + date.getFullYear(); 
    } 
}); 

これは非常に醜いソリューションです。ビューオブジェクトを使用できません...

Answer 1

ビューモデルを更新し、ビューモデルを監視して日付ピッカーの値を設定するには、入力時に変更イベントを処理する必要があります。これは、日付ピッカーを独自のコンポーネントに抽象化した場合には非常に簡単ですが、以下のコードに基づいた実際の例があります。

は、ここに見てについて詳しく読む：https://vuejs.org/v2/api/#watch

// Init Vue 
new Vue({ 
    el: '#vueDate', 
    data: { 
    thedate: '00-00-0000', 
    thedate_counter: 0, 
    picker: null 
    }, 
    mounted: function() {  
    var el = $('#thedate') 
    this.picker = el.pickadate().pickadate('picker') 
    var vm = this 
    el.on('change', function() { 
      vm.thedate = this.value 
     }) 
    }, 
    watch: { 
    thedate: function(value) { 
     this.picker.set('select', value) 
    } 
    } 
});