Verwendung von v-on:clock in VueIch lerne derzeit das Vue.js-Framework. Notieren Sie sich alle auftretenden Probleme, damit Sie später darauf zurückgreifen können. Hier ist zunächst eine Seite (zur leichteren Betrachtung ist jedes Etikett einzeln eingefärbt): Der HTML-Code lautet: <div Klasse="Gruppenkörper"> <ul Klasse="Liste"> <li v-for="Zelle in todo.groupbody " Klasse="Seitengruppenzelle " v-on:click="Austausch($Ereignis)"> <div class="pagecelltext">{{ Zelle.links }}</div> <div class="pagecellmin">{{ Zelle.min }}</div> <img src="img/images/direction/right.png" style="Breite: 20px;Höhe: 30px;Float: rechts;Rand oben: 5px;"> <div class="pagecellmsg">{{ Zelle.rechts }}</div> </li> </ul> <div Klasse="klar"></div> </div> js-Teil des Codes: Austausch: Funktion (Ereignis) { alert("Methode ausführen starten"); var a = Ereignis.Ziel; var cellimg = a.getElementsByTagName("div")[0]; var msg = cellimg.innerText; Seite2Daten.todos[0].groupheader = msg; alert("Methode wird ausgeführt"); var b = document.getElementById("Seite1"); b.style.display = "keine"; var c = document.getElementById("Seite2"); c.style.display = "Block"; alert("Methodenausführung beendet"); } Wenn Sie zu diesem Zeitpunkt auf den farbigen Bereich in der Zelle klicken (dh wenn Sie auf die Textbeschriftung des li-Tags klicken), wird nur die erste alert()-Methode ausgeführt, die folgenden beiden Methoden werden nicht ausgeführt. Der Grund liegt im Event-Parameter dieser Methode:Wenn in der Tag-Bindungsmethode ein Parameter „$event“ vorhanden ist, können Sie „event.target“ verwenden, um das Tag abzurufen, das am aktuellen Punkt an das Klickereignis gebunden ist. Dieser Parameter kann jedoch auch einige Probleme verursachen. Wenn Sie beispielsweise die Click-Ereignismethode vollständig ausführen möchten, unabhängig davon, auf welchen Teil des li-Tags geklickt wird, ist der Ereignisparameter nicht anwendbar. Derzeit können wir nur über andere Lösungen nachdenken. Lösung:In li gibt es eine v-for-Schleife, die ein Zellobjekt hat, das die Daten im li-Tag enthält. Sie müssen dieses Objekt nur an die Klickereignismethode übergeben und können dieses Objekt verwenden, um den Zweck zu erreichen, den Sie gerade erreichen wollten. Der geänderte HTML-Code: <div Klasse="Gruppenkörper"> <ul Klasse="Liste"> <li v-for="Zelle in todo.groupbody " Klasse="Seitengruppenzelle " v-on:click="Austausch(Zelle)"> <div class="pagecelltext">{{ Zelle.links }}</div> <div class="pagecellmin">{{ Zelle.min }}</div> <img src="img/images/direction/right.png" style="Breite: 20px;Höhe: 30px;Float: rechts;Rand oben: 5px;"> <div class="pagecellmsg">{{ Zelle.rechts }}</div> </li> </ul> <div Klasse="klar"></div> </div> Der geänderte js-Code: Austausch: Funktion (Zelle) { alert("Methode ausführen starten"); Seite2Daten.todos[0].groupheader =Zelle.links; alert("Wird ausgeführt"); var b = document.getElementById("Seite1"); b.style.display = "keine"; var c = document.getElementById("Seite2"); c.style.display = "Block"; alert("Methodenausführung beendet"); } An diesem Punkt kann die gesamte Methode zur Ausführung des Elektroschockereignisses vollständig ausgeführt und auch der nachfolgende Seitenwechsel abgeschlossen werden. Ergänzung: Parameterprobleme beim Binden von Klickereignissen an v-on in Vue Beim Binden von Klickereignissen an v-on gibt es drei Fälle bezüglich der Parameter: Nach der gebundenen Methode gibt es keine Klammern<button @click="btnClick">Klick</button> <Skript> const app = new Vue({ Methoden:{ btnClick(Ereignis){ // Zu diesem Zeitpunkt ist das Ereignis das aktuell angeklickte Objekt console.log(Ereignis) } } }) </Skript> Auf die gebundene Methode folgen Klammern<button @click="btnClick()">Klick</button> <Skript> const app = new Vue({ Methoden:{ btnClick(Ereignis){ // Zu diesem Zeitpunkt ist das Ereignis nicht definiert console.log(Ereignis) } } }) </Skript> Nach der gebundenen Methode stehen Klammern und es müssen Parameter übergeben werden<button @click="btnClick(123)">Klick</button> <Skript> const app = new Vue({ Methoden:{ btnClick(Ereignis){ // Zu diesem Zeitpunkt ist das Ereignis 123 console.log(Ereignis) } } }) </Skript> Hinter der gebundenen Methode stehen Klammern und sie muss Parameter und das aktuell angeklickte Objekt übergeben.<!-- In diesem Fall muss der Parameter $event sein, wenn Sie das aktuell angeklickte Objekt übergeben müssen --> <!-- Wenn Sie an der ersten Stelle eine Zahl übergeben möchten, müssen Sie keine Anführungszeichen hinzufügen. Wenn Sie eine Zeichenfolge übergeben möchten, müssen Sie Anführungszeichen hinzufügen. Wenn Sie keine Anführungszeichen hinzufügen, analysiert Vue sie als Variable. Wenn sie nicht in den Daten definiert ist, wird ein Fehler gemeldet. --> <button @click="btnClick(123,$event)">Klick</button> <Skript> const app = new Vue({ Methoden:{ btnClick(Anzahl,Ereignis){ // Zu diesem Zeitpunkt ist num gleich 123, event ist das aktuell angeklickte Objekt, console.log(Nummer,Ereignis) } } }) </Skript> Das Obige ist meine persönliche Erfahrung. Ich hoffe, es kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden. Sollten dennoch Fehler oder unvollständige Überlegungen vorliegen, freue ich mich über eine Korrektur. Das könnte Sie auch interessieren:
|
>>: Bei verschachtelten MySQL-Transaktionen aufgetretene Probleme
Inhaltsverzeichnis Vorwort 1. Der Effekt ist wie ...
So fügen Sie ein <script>-Skript in HTML ein...
Inhaltsverzeichnis 1. Grundlegende Verwendung von...
Da das Problem ziemlich plötzlich auftrat und das...
CSS-Probleme mit dem Hintergrundverlauf und dem a...
1. Einleitung In diesem Artikel wird hauptsächlic...
Inhaltsverzeichnis Namespaces mit gleichem Namen ...
Dieser Artikel stellt den Beispielcode für CSS-Bi...
Inhaltsverzeichnis 0. Der mit dem System geliefer...
MySQL 5.7-Installation Wir lernen in der Schule M...
Inhaltsverzeichnis einführen Implementierungsschr...
Dieser Artikel stellt hauptsächlich die Lösung fü...
Auswirkungen der Hintergrundposition auf die Anze...
Swap deaktivieren Wenn auf dem Server ein Datenba...
Als Frontend-Neuling habe ich einige Tage am Front...