Javascript 是否可以使用 Vue.js 触发事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31917889/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to trigger events using Vue.js?
提问by Nick Law
I have just started using Vue.jsand find myself continuously turning to jQuery to help in certain situations. Most recently I have attempted to, unsuccessfully "trigger" (or emulate) an event, such as an on click or blur event.
我刚刚开始使用Vue.js并发现自己不断转向 jQuery 以在某些情况下提供帮助。最近，我试图“触发”（或模拟）一个事件，例如点击或模糊事件，但未成功。
I know in jQuery you can do the following:
我知道在 jQuery 中您可以执行以下操作：
$('#my-selector').trigger('click');
But how can this be acheived using Vue.js? I am wanting to move away from using jQuery as much as possible.
但是如何使用 Vue.js 实现这一点？我想尽可能地停止使用 jQuery。
Take the below as an example:
以下面为例：
<div id="my-scope">
<button type="button" v-on="click: myClickEvent">Click Me!</button>
</div>
<script>
new Vue({
el: "#my-scope",
data: {
foo: "Hello World"
},
methods: {
myClickEvent: function(e) {
console.log(e.targetVM);
alert(this.foo);
},
anotherRandomFunciton: function() {
this.myClickEvent();
}
}
});
</script>
If I was to call anotherRandomFunciton, I would like it to emulate (or trigger) the above click event. However, I attempt this the event (or ein the above example) never gets passed to the function.
如果我要调用anotherRandomFunciton，我希望它模拟（或触发）上述点击事件。但是，我尝试将事件（或上面示例中的e）传递给函数。
Does Vue.js have a method for achieving this?
Vue.js 有实现这一目标的方法吗？
回答by matpie
You need to get a reference to your button by using v-ellike so:
您需要使用v-el如下方式获取对按钮的引用：
<button type="button" @click="myClickEvent" v-el:my-btn>Click Me!</button>
Then, in your method:
然后，在您的方法中：
function anotherRandomFunction() {
var elem = this.$els.myBtn
elem.click()
}
It's just a native DOM click event. See v-elDocumentation
它只是一个原生 DOM 单击事件。查看v-el文档
Or since Vue 2.x:
或者从 Vue 2.x 开始：
<template>
<button type="button" @click="myClickEvent" ref="myBtn">
Click Me!
</button>
</template>
<script>
export default {
methods: {
myClickEvent($event) {
const elem = this.$refs.myBtn
elem.click()
}
}
}
</script>
Since Vue uses and listens for native DOM events only. You can trigger native DOM events using the Element#dispatchEventlike so:
由于 Vue 仅使用和侦听本机 DOM 事件。您可以使用Element#dispatchEvent如下方式触发原生 DOM 事件：
var elem = this.$els.myBtn; // Element to fire on
var prevented = elem.dispatchEvent(new Event("change")); // Fire event
if (prevented) {} // A handler used event.preventDefault();
This is not exactly ideal or best practice. Ideally, you should have a function that handles the internals and an event handler that calls that function. That way, you can call the internals whenever you need to.
这不是完全理想或最佳实践。理想情况下，您应该有一个处理内部结构的函数和一个调用该函数的事件处理程序。这样，您可以在需要时调用内部组件。
回答by prinsen
If someone stumbles upon this, this is how I did it:
如果有人偶然发现了这一点，我就是这样做的：
When using this.$refs.myBtn.click()
使用时 this.$refs.myBtn.click()
I get
我得到
“Uncaught TypeError: this.$refs.myBtn.click is not a function”
“未捕获的类型错误：this.$refs.myBtn.click 不是函数”
Changed it to: this.$refs.myBtn.$el.click()
改为： this.$refs.myBtn.$el.click()
To be clear: “$el” needs to be added for it to work.
需要明确的是：$el需要添加“ ”才能使其工作。
回答by David K. Hess
Vue is by its nature narrowly focused –?it is intended that other packages like jQuery (EDIT: for jQuery features otherthan DOM manipulation) to be used with it. I think using jQuery's triggeris just fine.
？Vue公司是由它的性质狭隘的-其意图是像jQuery其他包（编辑：jQuery的功能其他比DOM操作）将与它一起使用。我认为使用 jQuery 的trigger就好了。
However, if you want to create your own events without jQuery, check out dispatchEvent:
但是，如果您想在没有 jQuery 的情况下创建自己的事件，请查看dispatchEvent：
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent
Or, for the particular case of click, there is a method on DOM elements you can use:
或者，对于单击的特殊情况，您可以使用 DOM 元素上的一种方法：
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click
