无法将 v-model 与 vue-date-picker 绑定

Question

I have used vue-date-picker and v-model for two way data binding. Initially I have set value to date(ie startDate in this case) and in console I am printing that passed value(ie startDate ). At first, that passed value to startDate (ie 2019-09-17 is printed) but when I chose new Date, startDate value didn't get updated rather value remained same as it was when it was initially passed.

       <div class="col-md-3">
            <label for="startDate" class>Start Date</label>
            <datepicker v-model="startDate" :readonly="true" format="YYYY-MM-DD" name="startDate"> 
            </datepicker>
       </div>
       <p>Start Date: {{startDate}}</p>

       <div class="col-md-2">
         <div class="md-form mb-0">
           <button type="button" class="btn btn-primary" @click="showDateValues">Apply</button>
         </div>
       </div>

import datepicker from "vue-date-picker";

<script>
import datepicker from "vue-date-picker";

export default {
  name: "Example",
  components: {
    datepicker
  },
  data() {
    return {
      startDate: "2019-09-17"
    };
  },
  methods:{
    showDateValues(){
      console.log("Start Date: "+this.startDate)
    }
  }
};
</script>

Answer 1

try this:

 data() {
    return {
      startDate: new Date("2019-09-17")
    };
  },

Answer 2

 var elm = new Vue({ el: '.app8', mounted () { var vm = this $('#datedate').datepicker ({ onSelect: function(dateText) { vm.date = dateText } }) });

 <div class="row mt-5"> <div class="col"> <div class="app8"> <input v-model="date" name="date" class="input" type="date" id="datedate"> </div> </div> </div>

Hope this will help