get two datepicker input values using one mounted function with vue

Question

I'm trying to get two input values using one mounted function for the date picker. But not getting how do I do that? Here is the code: 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 code:

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

Any suggestions please?

Answer 1

As Sphinx pointed there is some context mess, but it's not the only issue.

See this updated fiddle: https://jsfiddle.net/pb91fk6o/

You have to add

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

to make this work.

So mounted should look like:

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

See this issue for more details: https://github.com/vuejs/vue/issues/2804