Vuejs, как заставить v-модель обновляться, когда Jquery меняет ввод текста? - PullRequest
Новая
       6

Vuejs, как заставить v-модель обновляться, когда Jquery меняет ввод текста?

0 голосов
/ 09 июня 2018

У меня есть 4 входа с всплывающим таймером.Я использую плагин jquery timepicker, который не имеет никакого очевидного способа манипулировать вводом через обратный вызов.Но Vuejs не обнаруживает изменения в текстовом поле, даже когда они отчетливо видны на экране, пока в поле ввода не будет нажата клавиша. 

   <input data-ref="timeSelectionInput" v-model="item.StartTime"  type="text" data-ref="timeSelectionInput">

Я пытался это сделать, но он испортил и изменилзначения случайным образом для одного из других полей ввода. 

  var timeSelectionInput = document.querySelectorAll("input[data-ref=timeSelectionInput]");
  for (let i = 0; i < timeSelectionInput.length; i++) {
    timeSelectionInput[i].dispatchEvent(new Event('input'));
    console.log('input even dispatched')
  }

Как мы должны обновить модель для соответствия изменениям, вызванным программно, и почему это так сложно в vuejs?Он должен просто обнаружить изменение, как Angular делает с зонами.Любая помощь приветствуется.

Ответы [ 2 ]

0 голосов
/ 09 июня 2018

Вам необходимо получить доступ к объекту данных Vue внутри контекста jQuery.Что означает, что это должно быть в объеме.Ниже я демонстрирую подход.

Вместо плагина Timepicker я просто использовал кнопку.Я не уверен, как конкретно работает плагин timepicker, но я уверен, что есть обратный вызов, который запускает какое-то событие изменения, которое вы можете использовать. 

let data = {
  value: 'initial',
};

new Vue({
  el: '#app',
  data: data,
});

$(document).ready(function () {
  $('button').on('click', function () {
    data.value = 'changed';
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app">
  <input v-model="value">  
</div>
<button>Change value via jQuery listener</button>
0 голосов
/ 09 июня 2018

Вы можете использовать событие changeTime для изменения вашей модели, как в примерах, приведенных здесь: http://jonthornton.github.io/jquery-timepicker/

$('#onselectExample').timepicker();
$('#onselectExample').on('changeTime', function() {
  this.selectedDate = $(this).val();
});

Альтернативно использование модификатора lazy может работать, так как оно меняет обновление с input событие к событию changed.Это будет означать, что ваша модель больше не будет обновляться при событии input. 

   <input data-ref="timeSelectionInput" v-model.lazy="item.StartTime"  type="text" data-ref="timeSelectionInput">
...