Ich habe gerade angefangen, Vue.js zu verwenden, und wende mich ständig an jQuery, um in bestimmten Situationen zu helfen. Zuletzt habe ich versucht, ein Ereignis, z. B. ein Ereignis beim Klicken oder Verwischen, erfolglos "auszulösen" (oder zu emulieren).
Ich weiß, dass Sie in jQuery Folgendes tun können:
$('#my-selector').trigger('click');
Aber wie kann dies mit Vue.js erreicht werden? Ich möchte mich so weit wie möglich von der Verwendung von jQuery entfernen.
Nehmen Sie das folgende Beispiel:
<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>
Wenn ich anotherRandomFunciton aufrufen möchte, möchte ich, dass es das obige Klickereignis emuliert (oder auslöst). Ich versuche jedoch, dass das Ereignis (oder e im obigen Beispiel) niemals an die Funktion übergeben wird.
Hat Vue.js eine Methode, um dies zu erreichen?
3 Antworten
Sie müssen einen Verweis auf Ihre Schaltfläche erhalten, indem Sie v-el wie folgt verwenden:
<button type="button" @click="myClickEvent" v-el:my-btn>Click Me!</button>
Dann in Ihrer Methode:
function anotherRandomFunction() {
var elem = this.$els.myBtn
elem.click()
}
Es ist nur ein natives DOM-Klickereignis. Siehe v-el Dokumentation
Oder seit 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>
Da Vue nur native DOM-Ereignisse verwendet und abhört. Sie können native DOM-Ereignisse mithilfe von Element#dispatchEvent wie so:
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();
Dies ist nicht gerade ideal oder eine bewährte Methode. Idealerweise sollten Sie eine Funktion haben, die die Interna behandelt, und einen Ereignishandler, der diese Funktion aufruft. Auf diese Weise können Sie die Interna jederzeit anrufen.
Wenn jemand darauf stößt, habe ich es so gemacht:
Bei Verwendung von this.$refs.myBtn.click()
Ich bekomme
"Nicht gefangener TypeError: this. $ Refs.myBtn.click ist keine Funktion"
Es wurde geändert in: this.$refs.myBtn.$el.click()
Um klar zu sein: " $el " muss hinzugefügt werden, damit es funktioniert.
Vue ist von Natur aus eng fokussiert - es ist beabsichtigt, dass andere Pakete wie jQuery (BEARBEITEN: für jQuery-Funktionen andere als DOM-Manipulation) damit verwendet werden. Ich denke, die Verwendung von trigger von jQuery ist in Ordnung.
Wenn Sie jedoch Ihre eigenen Ereignisse ohne jQuery erstellen möchten, lesen Sie dispatchEvent:
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent
Für den speziellen Klickfall gibt es eine Methode für DOM-Elemente, die Sie verwenden können:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click