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?

63
Nick Law 10 Aug. 2015 im 14:04

3 Antworten

Beste Antwort

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.

57
matpie 25 Juli 2017 im 23:03

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.

14
Rakibul Haq 7 Feb. 2019 im 08:27