Question

我已经使用 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>

Answer 1

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>

希望这会有所帮助

Answer 2

试试这个：

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

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

2 个答案: