当Jquery更改文本输入时，Vuejs如何强制v-model更新？答案

【问题标题】：Vuejs how to force v-model to update when Jquery changes text input?当Jquery更改文本输入时，Vuejs如何强制v-model更新？
【发布时间】：2018-06-08 21:44:08
【问题描述】：

我有 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 对区域所做的更改。任何帮助表示赞赏。

【问题讨论】：

标签： jquery vue.js vuejs2 timepicker

【解决方案1】：

您需要在 jQuery 上下文中访问 Vue 的数据对象。这意味着它需要在范围内。下面我演示一种方法。

我只使用了一个按钮，而不是 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>

【讨论】：

【解决方案2】：

您可以使用changeTime 事件来更改您的模型，如此处提供的示例所示：http://jonthornton.github.io/jquery-timepicker/

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

也可以使用惰性修饰符，因为它将更新从input 事件更改为changed 事件。这意味着您的模型将不再更新 input 事件。

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

【讨论】：