javascript - 让Vue注册datepicker事件

Question

如何让 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 中的日期选择器中添加隐藏事件的处理程序。

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已更新以配合使用。