Vuejs Arrow Funktion löst keine zweite Anweisung aus

Ich verwende einen Lambda-Ausdruck innerhalb des Methodenabschnitts einer Vuejs-Komponente. Das Beispiel ist unter Ich Trigger alertyou() und erhalten Sie die Warnung, klicken Sie auf OK. Dann in den Vue-Entwickler-Tools sehe ich this.activated wird true.Vuejs Arrow Funktion löst keine zweite Anweisung aus

export default { 
    name: 'HelloWorld', 
    data() { 
    return { 
     msg: 'Welcome to Your Vue.js App', 
     activated: false 
    } 
    }, 
    methods: { 
     alertme:() => { alert('Clicked'); this.activated = false; }, 
     alertyou() { 
     alert('Alert You'); 
     this.activated = true 
     } 
    } 
}

Allerdings, wenn ich auf die Schaltfläche klicken, die die alertme Lambda auslöst. Ich bekomme die Warnmeldung, klicken Sie auf OK. Aber dann bleibt das aktiviert.

Was ist los hier ist dies eine Einschränkung mit Lambdas? Können Sie nur eine Aussage pro Lambda auslösen? Oder muss das mit dem Umfang umgehen, sobald eine Warnung ausgelöst wird?

Quelle

2017-11-12 christopher clark

Nein, Pfeilfunktionen sind nicht darauf beschränkt, nur eine Anweisung zu enthalten. Ändern Sie den Alarm für console.log und testen Sie ihn erneut. Verwenden Sie keine Warnung, da die Anweisung blockiert wird. – WaldemarIce

@WaldemarIce 'alert' wird nichts daran hindern, ausgeführt zu werden. Das Problem besteht darin, dass die Verwendung einer Pfeilfunktion "this" an den übergeordneten Bereich bindet, der nicht die Vue-Instanz ist. Er sollte "alertme" als eine normale Funktion definieren (oder die Kurzschrift verwenden, wie er es bei "alertyou" getan hat). Er muss nicht explizit an "das" binden. – thanksd

@thanksd Lesen Sie die obigen Kommentare. Ich weiß, wo er ein Problem hat - mit dem Umfang. Und du liegst falsch, Alert ist Code Blocking-Anweisung. Wenn Sie es aufrufen, wird die Codeausführung buchstäblich pausiert. – WaldemarIce

Was ist los hier ist dies eine Einschränkung mit lambdas? Können Sie nur eine Aussage pro Lambda auslösen? Oder muss das mit dem Umfang umgehen, sobald eine Warnung ausgelöst wird?

Es ist weder.

Eine Pfeilfunktion hält this gebunden an den Kontext, den es war, als die Pfeilfunktion erstellt wurde. In diesem Fall ist this nicht die Vue-Instanz. Es ist wahrscheinlich window

Eine Funktion für ein Objekt mit dem Funktion Schlüsselwort (oder der ES6-Objekt Stenotyp) hat normalerweise this gebunden an das Objekt, auf dem die Funktion deklariert ist.

Deshalb sollten Sie this.activated auf alertyou zugreifen können, aber nicht alertme

Sie werden die gleiche Syntax wie alertyou zu erklären, die alertme Methode verwenden möchten.

Quelle

2017-11-12 19:36:02 akatakritos

Ich bekomme es jetzt, wie könnte ich weiterhin die Pfeilfunktion Syntax obwohl? –

Warum willst du? – akatakritos

@christopherclark Die schlechte Nachricht ist, dass Sie einfach keine Pfeilfunktionen verwenden können, um Methoden auf der Vue-Instanz so zu definieren. Es gibt eine Menge Fragen zu den vue-bezogenen SO-Tags über Probleme, die durch dieses Missverständnis verursacht wurden. Vue macht von Anfang an Magie hinter den Kulissen, um "This" an die Vue-Instanz zu binden und es unterstützt einfach keine Pfeilfunktionen. Die Verwendung einer Pfeilfunktion bindet 'this' immer an den Kontext des übergeordneten Bereichs. In Ihrem Fall, da dies eine einzelne Dateikomponente im Knoten zu sein scheint, binden Sie 'this 'an' undefined'. – thanksd

Ändern alertme:() => { alert('Clicked'); this.activated = false; } zu alertme() { alert('Clicked'); this.activated = false; }. Sie können ein funktionierendes Beispiel sehen here

Quelle

2017-11-12 19:26:54 jsrbn

Eine kleine Erklärung zusammen mit dem Code würde sicherlich helfen. – yuriy636

Natürlich: Wie @thanksd oben in den Kommentaren des Hauptbeitrags erwähnt, binden die Pfeilfunktionen 'this' an den übergeordneten Bereich, der in diesem Fall nicht die Vue-Instanz ist. Und aus diesem Grund müssen Sie eine normale Javascript-Funktion verwenden, die Sie mit 'function alertme() {}' initialisieren oder wie Sie oben mit 'alertme() {}' sehen, was eine ES6-Verknüpfung ist. – jsrbn

Vuejs Arrow Funktion löst keine zweite Anweisung aus

Antwort

Verwandte Themen