javascript - ¿Es posible desencadenar eventos usando Vue.js?

jquery

Question

Acabo de empezar a usar Vue.js y me encuentro recurriendo continuamente a jQuery para ayudar en ciertas situaciones. Más recientemente, he intentado, sin éxito, "desencadenar" (o emular) un evento, como un clic o un evento borroso.

Sé que en jQuery puedes hacer lo siguiente:

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

Pero, ¿cómo se puede lograr esto usando Vue.js? Estoy deseando alejarme de usar jQuery tanto como sea posible.

Tomemos como ejemplo lo siguiente:

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

Si tuviera que llamar a otroRandomFunciton , me gustaría que emule (o dispare) el evento de clic anterior. Sin embargo, intento que el evento (o e en el ejemplo anterior) nunca pase a la función.

¿Vue.js tiene un método para lograr esto?

Answer 1

Necesita obtener una referencia a su botón usando v-el como:

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

Luego, en tu método:

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

Es solo un evento de clic DOM nativo. Ver documentación v-el

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

Ya que Vue usa y escucha solo para eventos DOM nativos. Puede desencadenar eventos DOM nativos usando el Element#dispatchEvent forma:

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

Esto no es exactamente lo ideal o la mejor práctica. Idealmente, debería tener una función que maneje las partes internas y un controlador de eventos que llame a esa función. De esa manera, puede llamar a las partes internas cuando lo necesite.

Answer 2

Por su propia naturaleza, Vue está estrechamente enfocado: se pretende que otros paquetes como jQuery se utilicen con él. Creo que usar el trigger de jQuery está bien.

Sin embargo, si desea crear sus propios eventos sin jQuery, revise dispatchEvent :

Element#dispatchEvent

O, para el caso particular de clic, hay un método en los elementos DOM que puede usar:

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

Answer 3

Si alguien se topa con esto, así es como lo hice:

Al usar este. $ Refs.myBtn.click () Me sale "UnCught TypeError: this. $ Refs.myBtn.click no es una función"

Se cambió a: este. $ Refs.myBtn. $ El.click ()

Para que quede claro: " $ el " debe agregarse para que funcione.