我有 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 的数据对象。这意味着它需要在范围内。下面我演示一种方法。
我没有使用时间选择器插件,而是使用了一个按钮。我不确定时间选择器插件具体是如何工作的,但我确信有一个回调会在您可以使用的某种更改事件上触发。
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>
关于jquery - 当Jquery更改文本输入时,Vuejs如何强制v-model更新?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50768764/