javascript - 无法将v-model与vue-date-picker绑定(bind)

我已经将vue-date-picker和v-model用于两种方式的数据绑定。最初，我将值设置为date（在这种情况下为startDate），然后在控制台中打印通过的值（即startDate）。首先，将传递的值传递给startDate（即打印出2019-09-17），但是当我选择新的Date时，startDate的值没有得到更新，而是保持与最初传递时相同的值。

       <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>

  从“ vue-date-picker”导入datepicker；

<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>

最佳答案

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>

希望这会有所帮助

关于javascript - 无法将v-model与vue-date-picker绑定(bind)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58056057/