web-dev-qa-db-fra.com

Est-il possible de déclencher des événements à l'aide de Vue.js?

Je viens de commencer à utiliser Vue.js et je me tourne continuellement vers jQuery pour aider dans certaines situations. Plus récemment, j'ai tenté de "déclencher" (ou d'émuler) sans succès un événement, tel qu'un événement au clic ou flou.

Je sais que dans jQuery, vous pouvez effectuer les tâches suivantes:

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

Mais comment cela peut-il être réalisé avec Vue.js? Je souhaite m'éloigner autant que possible de jQuery.

Prenons l'exemple ci-dessous:

<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 je devais appeler anotherRandomFunciton , je voudrais qu'il émule (ou déclenche) l'événement de clic ci-dessus. Cependant, j'essaye que l'événement (ou e dans l'exemple ci-dessus) ne soit jamais transmis à la fonction.

Vue.js a-t-il une méthode pour y parvenir?

javascriptjqueryvue.js
40
Nick Law

Vous devez obtenir une référence à votre bouton en utilisant v-el ainsi:

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

Ensuite, dans votre méthode:

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

C'est juste un événement de clic natif dans le DOM. Voir v-el Documentation

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

Depuis Vue utilise et écoute uniquement les événements DOM natifs. Vous pouvez déclencher des événements DOM natifs à l'aide de Element#dispatchEvent comme si:

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

Ce n'est pas exactement idéal ou la meilleure pratique. Idéalement, vous devriez avoir une fonction qui gère les éléments internes et un gestionnaire d’événements qui appelle cette fonction. De cette façon, vous pouvez appeler les internes chaque fois que vous en avez besoin.

50
matpie

Si quelqu'un tombe sur cela, voici comment je l'ai fait:

Lors de l'utilisation de this.$refs.myBtn.click()

Je reçois

“TypeError non capturé: ceci. $ Refs.myBtn.click n'est pas une fonction”

Changé en: this.$refs.myBtn.$el.click()

Pour être clair: "$el ”doit être ajouté pour que cela fonctionne.

10
prinsen

Vue est par nature étroitement centré - il est prévu que d’autres paquetages comme jQuery (EDIT: pour les fonctionnalités jQuery autre que la manipulation DOM) soient utilisés avec ce logiciel. Je pense que l’utilisation de trigger de jQuery convient parfaitement.

Cependant, si vous voulez créer vos propres événements sans jQuery, consultez dispatchEvent:

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

Ou, dans le cas particulier du clic, il existe une méthode sur les éléments DOM que vous pouvez utiliser:

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

0
David K. Hess