Est-il possible de déclencher des événements à l'aide de Vue.js?
J'ai commencé à utiliser Vue.js et me retrouver en continu de tourner à jQuery pour les aider dans certaines situations. Plus récemment, j'ai tenté, en vain "déclencheur" (ou à imiter) d'un événement, comme un clic de flou ou de l'événement.
Je sais que dans jQuery, vous pouvez effectuer les opérations suivantes:
$('#my-selector').trigger('click');
Mais comment cela peut-il être réalisés à l'aide Vue.js? Je suis désireux de se déplacer loin de l'aide de jQuery autant que possible.
Prendre le ci-dessous à titre d'exemple:
<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 j'étais à l'appel anotherRandomFunciton, je l'aime à imiter (ou déclencheur) ci-dessus cliquez sur l'événement. Cependant, j'ai cette tentative de l'événement (ou e dans l'exemple ci-dessus) n'est jamais passé à la fonction.
N'Vue.js avoir une méthode pour atteindre cet objectif?
- Êtes-vous d'accord avec l'aide de la plaine du javascript?
- J'imagine que oui, mais si c'est le cas, je peut tout aussi bien utiliser jQuery. Je viens si il peut y avoir une meilleure façon de le faire à l'aide de Vue.js
- Avez-vous vérifier les méthodes d'instance? Vous êtes en mesure d'appeler les événements de là à écouter événements plus jQuery de la mode. vuejs.org/api/instance-methods.html
- Vous essayez de simuler un clic d'événement, de sorte que le lien ne sera probablement pas aider non plus.
Vous devez vous connecter pour publier un commentaire.
Vous avez besoin pour obtenir une référence à votre bouton en utilisant
v-el
comme suit:Puis, dans votre méthode:
C'est juste un natif DOM cliquez sur l'événement. Voir
v-el
de la DocumentationOu depuis la Vue 2.x:
Vue depuis les utilisations et d'écoute pour les natifs de DOM événements. Vous pouvez déclencher le natif d'événements DOM à l'aide de la Élément
#dispatchEvent
comme suit:Ce n'est pas exactement idéal ou les meilleures pratiques. Idéalement, vous devriez avoir une fonction qui gère le fonctionnement interne et d'un gestionnaire d'événement qui appelle cette fonction. De cette façon, vous pouvez appeler l'intérieur chaque fois que vous en avez besoin.
Si quelqu'un tombe sur ce, c'est la façon dont je l'ai fait:
Lors de l'utilisation de
this.$refs.myBtn.click()
- Je obtenir
Changé:
this.$refs.myBtn.$el.click()
Pour être clair: “
$el
” doit être ajouté pour que cela fonctionne.this.$refs.filterGroupLegend.click()
fonctionne pour moi avec 2.5.16.$el
pour les éléments. Note de côté, poignée douce maan@remove
événement pour un composant,this.$refs.pictureInput.remove()
d'erreur s'affiche en disant qu'il n'est pas une fonction comme vous l'avez dit, de sorte que lors de l'utilisation dethis.$refs.pictureInput.$el.remove()
il appelle le natifremove()
j'imagine et je supprime l'élément de la vue. des suggestions pour éviter cela?Vue est, de par sa nature très ciblé – il est prévu que d'autres paquets comme jQuery (EDIT: pour jQuery caractéristiques autres de manipulation du DOM) pour être utilisé avec elle. Je pense que l'utilisation de jQuery
trigger
est tout simplement parfait.Cependant, si vous souhaitez créer vos propres événements sans jQuery, découvrez
dispatchEvent
:https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent
Ou, pour le cas particulier de clic, il existe une méthode sur les éléments DOM, vous pouvez utiliser:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click