Question

我有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对区域的变化。任何帮助表示赞赏。

Answer 1

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

我只使用了一个按钮而不是timepicker插件。我不确定timepicker插件是如何工作的，但我确定有一个回调会触发你可以使用的某种更改事件。

--defines

let data = {
  value: 'initial',
};

new Vue({
  el: '#app',
  data: data,
});

$(document).ready(function () {
  $('button').on('click', function () {
    data.value = 'changed';
  });
});

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

Vuejs如何在Jquery更改文本输入时强制v-model更新？

2 个答案: