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 1. Implementierungsprozess des...
Vorwort Dieser Artikel stellt hauptsächlich 4 Met...
Lesetipp: Navicat12.1 Serie Cracking und Aktivier...
HTML Quelltext: <a onclick="goMessage();&...
Charakter Dezimal Zeichennummer Entitätsname --- ...
1. Konfigurieren Sie den Docker-Remoteverbindungs...
Inhaltsverzeichnis Redo-Protokoll Warum müssen wi...
7 Möglichkeiten, mit CSS ein zweispaltiges Layout...
1. Laden Sie die VirtualBox-Software herunter und...
Nachdem der Container gestartet wurde Melden Sie ...
1. Selenium unter Linux verwenden 1. Installieren...
Inhaltsverzeichnis 1. dieses Schlüsselwort 2. Ben...
1. Verwenden Sie das Tag <a> zum Vervollstä...
Das Flex-Layout ist zweifellos einfach und leicht...
Zeigen Sie je nach Benutzerberechtigung unterschi...