Vueにdatepickerイベントを登録させる

Question

datepickerが日付を変更したことをVueに知らせるにはどうすればよいですか？ただ、入力フィールド

new Vue({ 
    el: '#app', 
    data: { 
    termin: '' 
    }, 
    computed: { 

    }, 
    methods: { 

    } 
}) 

：

<div id="app"> 

    <div class="uk-form-icon"><i class="uk-icon-calendar"></i> 
    <input name="termin" v-model="termin" value="" placeholder="Choose date" type="text" data-uk-datepicker="{format:'DD.MM.YYYY'}" required="required"> 
    </div> 
<p> 
Date: {{termin}} 
</p> 
</div> 

あなたが手のVueで入力フィールドをチャゲ場合は、それを取得しますが、ないピッカーをトリガーした後。

https://jsfiddle.net/Honkoman/dfohvcpk/

Answer 1

これを実行する最も簡単な方法は、あなたのVueでの日付ピッカーからhideイベントのハンドラを追加することです。

mounted(){ 
    $(this.$el).on('hide.uk.datepicker', e => this.termin = this.$refs.date.value) 
} 

ここにあなたのfiddleが更新されました。

伝統的には、wrapper componentにjQueryの対話をラップする必要があります。

Vue.component("datepicker",{ 
    props:["value"], 
    template:` 
    <input ref="date" name="termin" :value="value" placeholder="Choose date" type="text" data-uk-datepicker="{format:'DD.MM.YYYY'}" required="required"> 
    `, 
    mounted(){ 
     $(this.$el).on('hide.uk.datepicker', e => this.$emit('input', this.$refs.date.value)) 
    } 
}) 

そして、あなたのテンプレートは

<div class="uk-form-icon"><i class="uk-icon-calendar"></i> 
    <datepicker v-model="termin"></datepicker> 
</div> 

そして、ここではあなたのfiddleはそれで動作するように更新されてなります。

Answer 2

のUIKitイベント+ Vue.set： FIDDLE

$('input[name="termin"]').on('hide.uk.datepicker', function(){ 
    Vue.set(vm, 'termin', document.querySelector('input[name="termin"]').value) 
});