Es posible activar eventos usando Vue.js?

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

Sé que en jQuery puedes hacer lo siguiente:

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

Pero cómo se puede llegar a esto usando el SDV.js? Estoy queriendo cambiar el uso de jQuery tanto como sea posible.

Tome el siguiente ejemplo:

<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 fuera a llame a Otra función diferente, me gustaría emular (o desencadenar) el evento de clic anterior. Sin embargo, intento esto el evento (o e en el ejemplo anterior) nunca se pasa a la función.

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

Author: Nick Law, 2015-08-10
Source

3 answers

Necesitas obtener una referencia a tu botón usando v-el así: 

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

Entonces, en tu método: 

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

Es solo un evento de clic DOM nativo. Véase v-el Documentación

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

Dado que Vue usa y escucha solo eventos DOM nativos. Puede activar eventos DOM nativos utilizando el Element#dispatchEvent así: 

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, debe tener una función que maneje el internos y un controlador de eventos que llama a esa función. De esa manera, puede llamar a los internos cuando lo necesite.

 32
Author: matpie,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-25 23:03:08

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

Cuando se usa esto.ref árbitros.myBtn.haga clic en () Obtengo "Uncaught TypeError: this.ref árbitros.myBtn.click no es una función "

Lo cambió a: esto.ref árbitros.myBtn.$el.haga clic()

Para ser claro: "} el" necesita ser añadido para que funcione.

 3
Author: prinsen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-31 12:28:43

Vue es por su naturaleza estrechamente enfocado – se pretende que otros paquetes como jQuery sean usados con él. Creo que usar trigger de jQuery está bien.

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

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

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

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

 3
Author: David K. Hess,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-14 15:19:08