О двухсторонних привязках данных Vue: что, если содержимое поля формы не поступает от прямого ввода пользователя?

Question

Итак, у меня есть такой код:

<input name="date" v-model="date" id="date" type="text" value="" />

... тогда где-то еще:

<li><b>Date:</b> {{ date }}</li>

... И Vue:

var vueapp = new Vue({
  el: '#form'
  ,data:{
    date:''
  }
});

Обычно этот код обновляет содержимое li в режиме реального времени, пока пользователь вводит данные в поле ввода. Но в моем случае я назначил ему средство выбора даты в javascript, и содержимое li не обновляется. Я думаю, потому что нет никаких событий keyup (или подобных). Как элегантно преодолеть эту милую проблему?

Answer 1

Хорошо, мой собственный ответ исходит от предложения @ numbers1311407. По сути, я подключился к событиям плагинов из функции mounted Vue, а затем использовал метод экземпляра $set, чтобы изменить нужное мне свойство. Итак, подведем итог, вот мой HTML:

<input name="project[deadline]" v-model="form.project.deadline" data-toggle="datepicker" id="project-deadline" type="text" value="" />

А вот мой JS:

var vueapp = new Vue({
  el: '#form'
  ,data:{
    form:{ // for tech reasons I'm using several nested empty objects here
      contact:{}
      project:{} 
      component:{}
      // [...] other several objects ...
    }
  }
  ,mounted: function(){
    $('[data-toggle="datepicker"]').on('hide.datepicker', function (e) {
      _.delay(function(){ // from lodash.js
        this.$set(this.form.project, 'deadline', $(e.target).val());
      }.bind(this), 150); // because the plugin's event fires before the field gets updated
    }.bind(this));
  }
});

Обратите внимание, что я немного откладываю назначение, но это не вещь Vue. Это происходит только потому, что событие плагина, которое я использую, запускается непосредственно перед изменением значения, а сам плагин не предоставляет никакого события, которое происходит после. Поэтому мне нужно немного подождать, пока поле будет обновлено, а затем я могу подобрать его значение и присвоить его модели Вью.

Для справки, используемый в данный момент плагин этот .

Answer 2

Вы можете использовать для него компоненты, которые будут корректно обрабатывать такие сценарии. Например, используя vuejs-datepicker:

const app = new Vue({
  el: '#app',
  components: {
    vuejsDatepicker
  },
  data: {
    date: ''
  }
})

.as-console-wrapper{max-height:0!important;bottom:0;}

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuejs-datepicker"></script>
<div id="app">
  <vuejs-datepicker v-model="date"></vuejs-datepicker>
  <br/>
  <p><b>Date:</b> {{ date }}</p>
</div>

Вы также можете создать для него собственный компонент и использовать его в любом месте своего приложения.