Невозможно связать V-модель с Vue-Date-Picker - PullRequest
Новая
       12

Невозможно связать V-модель с Vue-Date-Picker

1 голос
/ 23 сентября 2019

Я использовал vue-date-picker и v-model для двухсторонней привязки данных.Первоначально я установил значение на дату (т.е. startDate в данном случае), и в консоли я печатаю это переданное значение (т.е. startDate ).Сначала это переданное значение в startDate (т.е. печатается 2019-09-17 ), но когда я выбрал новую дату, значение 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"; 

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

1 Ответ

0 голосов
/ 23 сентября 2019 

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>

Надеюсь, это поможет

...