使用一个带有 vue 的已安装函数获取两个日期选择器输入值

Question

我正在尝试使用 date picker 的一个已安装函数来获取两个输入值。但不知道我该怎么做？这是代码： HTML:

<div id="app">
<form v-on:submit.prevent="saveFleetJob">
<input type="text" class="fleet-date" v-model="item.from">
<input type="text" class="fleet-date" v-model="item.to">
<button  class="btn btn-primary">Click</button>
</form>
</div>

Vue代码：

new Vue({
  el: "#app",
  data: {
  item: {
                from:'',
                to:''
            },
  },
  mounted() {

        $(".fleet-date").datepicker().on(
            "changeDate", () => {
                this.item.from = $('.fleet-date').val()
            }
        );
   },
  methods: {
    saveFleetJob() {
            alert(JSON.stringify(this.item));
        },
  }
})

js fiddle demo link here

有什么建议吗？

Answer 1

正如 Sphinx 指出的那样，存在一些上下文混乱，但这不是唯一的问题。

查看此更新 fiddle：https://jsfiddle.net/pb91fk6o/

您必须添加

elem.dispatchEvent(new Event('input'))

使这项工作。

所以安装应该是这样的：

  mounted() {
        $(".fleet-date")
        .datepicker()
        .on("changeDate", (e) => {
          e.target.dispatchEvent(new Event('input')) 
        })
   },

查看此问题了解更多详情：https://github.com/vuejs/vue/issues/2804

使用一个带有 vue 的已安装函数获取两个日期选择器输入值

get two datepicker input values using one mounted function with vue

bootstrap-datepicker

vue.js