讓Vue註冊datepicker事件

我如何讓Vue知道datepicker更改日期？讓Vue註冊datepicker事件

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/

來源

2017-05-24 Mike

要做到這一點是添加一個處理程序從您的Vue的日期選擇器的隱藏事件的最快方式。

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

這裏是你的fiddle更新要做到這一點。

但是，傳統上，您應該將jQuery交互包裝在wrapper component中。

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更新與合作。

來源

2017-05-24 17:50:05 Bert

這兩種方法在某種程度上我得到'[VUE警告]：掛載鉤子錯誤：「TypeError：$不是函數」。看起來像jquery不知道...？ – Mike

@Mike聽起來很喜歡它。你需要確保jQuery被加載。 – Bert

好吧。甚至在所有其他之前 – Mike

UIKit的事件+ Vue.set： FIDDLE

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

來源

2017-05-24 17:22:05

讓Vue註冊datepicker事件

回答

相關問題