Lassen Sie uns über das v-on-Parameterproblem in Vue sprechen

Lassen Sie uns über das v-on-Parameterproblem in Vue sprechen

Verwendung von v-on:clock in Vue

Ich 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:
  • Schritte zum Übergeben dynamischer Parameter in Vue v-on:click
  • Detaillierte Erläuterung der grundlegenden Verwendung von Anweisungen zur V-On-Ereignisüberwachung in Vue
  • Eine kurze Diskussion über die Verwendung von v-on-Ereignisanweisungen in Vue.js

<<:  Verwenden Sie die Tools iptables und firewalld, um Verbindungsregeln für die Linux-Firewall zu verwalten

>>:  Bei verschachtelten MySQL-Transaktionen aufgetretene Probleme

Artikel empfehlen

Websocket+Vuex implementiert eine Echtzeit-Chat-Software

Inhaltsverzeichnis Vorwort 1. Der Effekt ist wie ...

2 Methoden und Vorsichtsmaßnahmen zum Hinzufügen von Skripten in HTML

So fügen Sie ein <script>-Skript in HTML ein...

Eine vollständige Anleitung zu CSS-Stilattributen css() und width() in jQuery

Inhaltsverzeichnis 1. Grundlegende Verwendung von...

CSS-Code zum Erreichen eines Hintergrundverlaufs und automatischen Vollbilds

CSS-Probleme mit dem Hintergrundverlauf und dem a...

Welcher Befehl eignet sich besser für die unscharfe Suche nach Dateien in Linux?

1. Einleitung In diesem Artikel wird hauptsächlic...

Erläuterung der Zusammenführung von TypeScript-Namespaces

Inhaltsverzeichnis Namespaces mit gleichem Namen ...

Beispielcode für CSS-Bildanimationseffekte (Fotorahmen)

Dieser Artikel stellt den Beispielcode für CSS-Bi...

Linux: Fünf-Schritte-Kernel-Build-Baum

Inhaltsverzeichnis 0. Der mit dem System geliefer...

MySQL5.7.27-winx64 Version Win10 Download- und Installations-Tutorial-Diagramm

MySQL 5.7-Installation Wir lernen in der Schule M...

Einige Vorschläge zur Linux-Systemoptimierung (Kerneloptimierung)

Swap deaktivieren Wenn auf dem Server ein Datenba...