web-dev-qa-db-ja.com

Vue.jsを使用してイベントをトリガーすることは可能ですか？

Vue.js を使い始めたばかりで、特定の状況で役立つためにjQueryを継続的に使用していることに気付きました。ごく最近、クリックイベントやぼかしイベントなどのイベントを「トリガー」（またはエミュレート）しようとして失敗しました。

JQueryでは次のことができることを知っています。

$('#my-selector').trigger('click');

しかし、Vue.jsを使用してこれをどのように実現できますか？できる限りjQueryを使用しないようにしたいと思っています。

例として以下をご覧ください。

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

anotherRandomFuncitonを呼び出す場合、上記のクリックイベントをエミュレート（またはトリガー）したいです。ただし、イベント（または上記の例ではe）が関数に渡されることは決してありません。

Vue.jsにはこれを実現する方法がありますか？

javascriptjqueryvue.js
40
Nick Law

以下のようにv-elを使用して、ボタンへの参照を取得する必要があります。

<button type="button" @click="myClickEvent" v-el:my-btn>Click Me!</button>

次に、メソッドで：

function anotherRandomFunction() {
    var elem = this.$els.myBtn
    elem.click()
}

単なるネイティブDOMクリックイベントです。 v-el Documentation を参照してください

または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>

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();

これは、理想的でもベストプラクティスでもありません。理想的には、内部を処理する関数と、その関数を呼び出すイベントハンドラーが必要です。そうすれば、必要なときにいつでも内部を呼び出すことができます。

50
matpie

誰かがこれにつまずいた場合、これは私がやった方法です：

this.$refs.myBtn.click()を使用する場合

私は得る

「不明なTypeError：this。$ refs.myBtn.clickは関数ではありません」

変更後：this.$refs.myBtn.$el.click()

明確にするために、「$el」を追加して動作させる必要があります。

10
prinsen

Vueはその性質上、狭い範囲に焦点を当てています。QueryjQueryのような他のパッケージ（EDIT：jQuery機能otherfor DOM操作） 。 jQueryのtriggerを使用するだけで十分だと思います。

ただし、jQueryを使用せずに独自のイベントを作成する場合は、dispatchEventを確認してください。

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent

または、クリックの特定の場合には、使用できるDOM要素のメソッドがあります。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

0
David K. Hess