Laravel Dusk Test无法使用jQuery在文本字段中触发Vue 13 keyCode

Question

挣扎了几天。

我需要创建一个使用Vuejs框架的laravel黄昏测试。 有一种方法会在用户按下ENTER键时触发。 我刚刚发现jQuery可以使用.trigger()方法以编程方式触发Enter键：

$（'。text-input'）。trigger（$。Event（“ keypress”，{keyCode：13}））

它工作正常，但不会触发与.text-input绑定的vue方法。 知道为什么它不起作用，还有其他方法可以满足要求吗？

谢谢大家的帮助。

Answer 1

我猜$ .Event是围绕本机事件的jQuery Event包装器，在某些情况下似乎触发了实际事件，我们需要本机事件。

var e = document.createEvent('HTMLEvents');
e.keyCode = 13;
e.initEvent('keypress', false, true);
$('.text-input').get(0).dispatchEvent(e);

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> </head> <body> <div id="app"> {{ message }} <input type='text' @keypress="test" id='ok' value='2 sec wait for it' /> </div> <script> new Vue({ el: '#app', data: { message : 'testing man' }, methods: { test(e) { console.log('wait for it enter triggered : ' + e.keyCode) } } }); setTimeout( () => { // modern browsers, IE9+ var e = document.createEvent('HTMLEvents'); e.keyCode = 13; e.initEvent('keypress', false, true); $('#ok').get(0).dispatchEvent(e); },2000) </script> </body> </html>

您可以尝试一下，让我们知道是否可行。

Answer 2

首先，感谢@HardikSatasiya提供的答案。 是的，它非常有用，因此我想回报您的青睐，以便将来的开发人员在遇到此问题时将其作为参考。 道歉，如果此评论太晚了。 我几乎忘记了这一点。

上面的示例运行良好，但是，我遇到了另一个问题。 场景是，在laravel黄昏测试中，我想在字段中放入文本，然后触发Vue.js的ENTER键事件。 实际上是JQuery和Vue.js的协作。 我的最终代码如下：

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> </head> <body> <div id="app"> <div> <label>Label</label> <input type='text' @keyup.13="myMethod" v-model='my_vue_element'/> </div> </div> <script> new Vue({ el: '#app', data: {my_vue_element: ''}, methods: { myMethod() { alert(this.my_vue_element) } } }) $(() => { // init enter event var enter_key = document.createEvent("HTMLEvents") enter_key.keyCode = 13 enter_key.initEvent("keyup", false, true) // select element in jquery format let jquery_element = $('label:contains("Label")').parent().find('input') // this is not native in jquery I guess let javascript_element = jquery_element.get(0) // put a value in text field jquery_element.val('Kanpai!') // the issue here is that, you need to dispatch an event at the specified eventTarget, the input. // usefull content in this link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent javascript_element.dispatchEvent(new Event("input")) setTimeout(() => { // trigger ENTER event javascript_element.dispatchEvent(enter_key) }, 1000) }) </script> </body> </html>

Laravel Dusk Test无法使用jQuery在文本字段中触发Vue 13 keyCode

问题描述

2 个解决方案

解决方案1
0 已采纳 2017-12-07 18:57:11

解决方案2
0 2017-12-21 20:22:22

Laravel Dusk Test无法使用jQuery在文本字段中触发Vue 13 keyCode

问题描述

2 个解决方案

解决方案1 0 已采纳 2017-12-07 18:57:11

解决方案2 0 2017-12-21 20:22:22

解决方案1
0 已采纳 2017-12-07 18:57:11

解决方案2
0 2017-12-21 20:22:22