首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Vuejs如何在Jquery更改文本输入时强制v-model更新?

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

Stack Overflow用户
提问于 2018-06-09 05:44:08
回答 2查看 2.2K关注 0票数 2

我有4个输入与时间选择器弹出。我使用的是一个jquery时间选择器插件,它没有任何明显的方法来通过回调来操作输入。但Vuejs不会检测到文本字段的变化,即使它们在屏幕上清晰可见,直到在输入字段中按下一个键。

代码语言:javascript
复制
   <input data-ref="timeSelectionInput" v-model="item.StartTime"  type="text" data-ref="timeSelectionInput">

我试过了,但它搞砸了,并随机地将值更改为其他输入域之一。

代码语言:javascript
复制
  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对区域所做的那样。任何帮助都是非常感谢的。

EN

回答 2

Stack Overflow用户

发布于 2018-06-09 06:19:20

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

我只使用了一个按钮,而不是时间选择器插件。我不确定timepicker插件具体是如何工作的,但我确信会有一个回调函数,它会触发一些您可以使用的更改事件。

代码语言:javascript
复制
let data = {
  value: 'initial',
};

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

$(document).ready(function () {
  $('button').on('click', function () {
    data.value = 'changed';
  });
});
代码语言:javascript
复制
<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
EN

Stack Overflow用户

发布于 2018-06-09 06:17:41

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

代码语言:javascript
复制
$('#onselectExample').timepicker();
$('#onselectExample').on('changeTime', function() {
  this.selectedDate = $(this).val();
});

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

代码语言:javascript
复制
   <input data-ref="timeSelectionInput" v-model.lazy="item.StartTime"  type="text" data-ref="timeSelectionInput">
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50768764

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档