Javascript 让Vue注册日期选择器事件

如何让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>

日期：{{termin}}

如果手动更改输入字段，Vue将获得该字段，但不会在触发选择器之后

UiKit事件+Vue.set：

---

最快的方法是从Vue中的日期选择器添加隐藏事件的处理程序

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

这是你的更新来做到这一点

然而，传统上，您应该将jQuery交互包装在一个文档中

Vue.component（“日期选择器”{
道具：[“价值”]，
模板：`
`,
安装的（）{
$（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>

---

这是您的更新，以处理该问题。

在这两种方法中，我不知何故得到了

[Vue warn]：挂载钩子中的错误：“TypeError:$不是函数”

。看起来jquery还不知道…？@迈克听起来像是。您需要确保jQuery已加载。甚至在所有之前other@Mike不知道该告诉你什么：）你能做一个重复错误的工作示例吗？不太可能。如果我发现了什么，我会写一条信息。

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>