Простой инструмент выбора даты на VueJS.

Я хочу сделать средство выбора даты и времени в теге ввода компонентов. Я внедрил bootstrap-datetimpicker, но когда я выбираю дату, я не могу получить входное значение в методах компонентов (вот пример: https://jsfiddle.net/ma9sgnd8/1/

new Vue({
    el: '#app',
  data: {
    date: ''
  },
  mounted: function() {

       var args = {

            format: 'MM/DD/YYYY'
       };
        this.$nextTick(function() {
            $('.datepicker').datetimepicker(args)
        });

       this.$nextTick(function() {
          $('.time-picker').datetimepicker({
            format: 'LT'
          })
       });
    }
})

vue.js vue-component
person pwnz22    schedule 22.11.2016    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Оказывается, vue прослушивает событие input узла dom, а не отслеживает value объекта js (что разумно, потому что не будет никакого объекта js, пока мы не document.querySelector() или около того). Доказательство: в документе говорится, что мы можем использовать модификатор .lazy для прослушать change событий вместо input. Поэтому, когда подключаемый модуль начальной загрузки на основе jQuery изменяет ввод value в js, vue не обнаружит его.

К счастью, плагин предоставляет событие изменения, так что мы можем вручную установить модель представления при возникновении события изменения: https://jsfiddle.net/ma9sgnd8/4/

person PanJunjie潘俊杰    schedule 23.11.2016

arrow_upward
2
arrow_downward

Проблема в вашем средстве выбора даты, если вы посмотрите в консоль, оно вылетает и проблема. не обновляет состояние правильно, попробуйте по умолчанию:

<div id="app">
  <div>
  <input type="date" v-model="date">
  </div>
  {{date}}
</div>

(или внешний пакет, например https://github.com/charliekassel/vuejs-datepicker)

person euvl    schedule 22.11.2016