Detaillierte Erklärung des Loop-Formularelementbeispiels in Vue

Detaillierte Erklärung des Loop-Formularelementbeispiels in Vue

Manchmal stoßen wir auf eine solche Anforderung, d. h., der Benutzer kann ein ähnliches Formular hinzufügen, indem er auf eine Schaltfläche klickt, und es einmal pro Klick hinzufügen. Dann müssen Sie Deep Copy, Vue.js+ElementUI usw. verwenden. Die Wirkung ist ungefähr so: Ein Formular hat eine Dropdown-Box und zwei Eingabefelder. Klicken Sie nun auf die Schaltfläche „Formular hinzufügen“ und ein weiteres Formular wird angezeigt. Klicken Sie auf „Formular übermitteln“, um die Werte der beiden Formulare gleichzeitig zu übermitteln.

Bildbeschreibung hier einfügen

Der Code lautet wie folgt:

<Vorlage>
  <div>
    <div Stil="Rand: 10px 0">
      <el-button type="primary" @click="addForm">Formular hinzufügen</el-button>
      <el-button type="primary" @click="submit">Formular absenden</el-button>
    </div>
    <div v-for="(Element, Index) in Liste" :Schlüssel="Index">
      <el-form ref="Formular" label-width="80px">
        <el-form-item label="Live-Übertragungsplattform">
          <el-Auswahl
            v-Modell="Artikel.Plattform"
            :Schlüssel="Index"
            Platzhalter="Bitte wählen Sie die Live-Streaming-Plattform aus"
          >
            <el-Option
              :label="item2.Plattformname"
              v-for="(item2, index2) in PlattformNameList"
              :Schlüssel="index2"
              :Wert="item2.Plattformwert"
            >
            </el-Option>
          </el-Auswahl>
        </el-form-item>

        <el-form-item label="Anzahl der Fans">
          <el-input v-model="item.fanMount" :key="index"></el-input>
        </el-form-item>

        <el-form-item label="Plattform-ID">
          <el-input v-model="item.platformId" :key="index"></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      Titel: „Inspektionsinhaltsseite“,
      personObj: {
        Plattform: "",
        Lüfterhalterung: "",
        Plattform-ID: "",
      },
      PlattformNameList: [
        {
          Plattformname: „Kuaishou“,
          Plattformwert: "1",
        },
        {
          Plattformname: „TikTok“,
          Plattformwert: "2",
        },
        {
          Plattformname: „Taobao“,
          Plattformwert: "3",
        },
      ],
      Liste: [
        {
          Plattform: "",
          Lüfterhalterung: "",
          Plattform-ID: "",
        },
      ],
    };
  },

  Methoden: {
  //tiefe Kopie cloneObj(obj) {
      lass es bleiben;
      wenn (Array.isArray(obj)) {
        //Erstelle ein leeres Array ret = [];
        für (lass i = 0; i < Objektlänge; i++) {
          ret[i] = dieses.cloneObj(obj[i]);
        }
        Rückkehr ret;
      } sonst wenn (Object.prototype.toString.call(obj) === "[Objekt Objekt]") {
        ret = {};
        für (lass i in obj) {
          ret[i] = dieses.cloneObj(obj[i]);
        }
        Rückkehr ret;
      } anders {
        gibt Objekt zurück;
      }
    },
    //Formular hinzufügen addForm() {
      lass arr = dieses.cloneObj(dieses.personObj);
      Konsole.log("arr", arr);
      dies.Liste.push(arr);
    },
    //Formular abschicken submit() {
      console.log("diese.Liste", diese.Liste);
    },
  },
};
</Skript>

Code-Analyse:
Hier ist eine Deep-Copy-Funktion gekapselt. Jedes Mal, wenn Sie auf „Formular hinzufügen“ klicken, wird eine Kopie des von uns definierten Objekts kopiert. Beachten Sie, dass dieses Objekt aus dem Wert unseres ursprünglichen Formulars besteht. Wir verwenden v-for, um die Array-Liste in der äußersten Ebene zu durchlaufen und jedes Mal, wenn Sie auf „Formular hinzufügen“ klicken, ein Objekt in das Array einzufügen. Klicken Sie abschließend auf die Schaltfläche „Formular senden“ und drucken Sie diese.Liste aus, um das gesamte Array-Objekt anzuzeigen. Versuchen wir es und geben die folgenden Werte ein:

Bildbeschreibung hier einfügen

Die Konsole druckt die folgenden Ergebnisse:

Bildbeschreibung hier einfügen

Nehmen wir nun an, dass mehrere Formulare hinzugefügt werden müssen, anstatt sie einzeln hinzuzufügen. Der Effekt ist wie folgt. Es gibt drei Schaltflächen und zu Beginn wird ein Formular angezeigt.

Bildbeschreibung hier einfügen

Wenn ich auf die Schaltfläche „3“ klicke, werden auf der Benutzeroberfläche insgesamt drei Formulare angezeigt, wie unten dargestellt:

Bildbeschreibung hier einfügen

Der Code lautet wie folgt:

<Vorlage>
  <div>
    <div Stil="Rand: 10px 0">
      <el-button type="primary" @click="add(3)">3</el-button>
      <el-button type="primary" @click="addForm">Formular hinzufügen</el-button>
      <el-button type="primary" @click="submit">Formular absenden</el-button>
    </div>
    <div v-for="(Element, Index) in Liste" :Schlüssel="Index">
      <el-form ref="Formular" label-width="80px">
        <el-form-item label="Live-Übertragungsplattform">
          <el-Auswahl
            v-Modell="Artikel.Plattform"
            :Schlüssel="Index"
            Platzhalter="Bitte wählen Sie die Live-Streaming-Plattform aus"
          >
            <el-Option
              :label="item2.Plattformname"
              v-for="(item2, index2) in PlattformNameList"
              :Schlüssel="index2"
              :Wert="item2.Plattformwert"
            >
            </el-Option>
          </el-Auswahl>
        </el-form-item>

        <el-form-item label="Anzahl der Fans">
          <el-input v-model="item.fanMount" :key="index"></el-input>
        </el-form-item>

        <el-form-item label="Plattform-ID">
          <el-input v-model="item.platformId" :key="index"></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      Titel: „Inspektionsinhaltsseite“,
      personObj: {
        Plattform: "",
        Lüfterhalterung: "",
        Plattform-ID: "",
      },
      PlattformNameList: [
        {
          Plattformname: „Kuaishou“,
          Plattformwert: "1",
        },
        {
          Plattformname: „TikTok“,
          Plattformwert: "2",
        },
        {
          Plattformname: „Taobao“,
          Plattformwert: "3",
        },
      ],
      Liste: [
        {
          Plattform: "",

          Lüfterhalterung: "",
          Plattform-ID: "",
        },
      ],
    };
  },

  Methoden: {
    Klonobjekt(Objekt) {
      lass es bleiben;
      wenn (Array.isArray(obj)) {
        //Erstelle ein leeres Array ret = [];
        für (lass i = 0; i < Objektlänge; i++) {
          ret[i] = dieses.cloneObj(obj[i]);
        }
        Rückkehr ret;
      } sonst wenn (Object.prototype.toString.call(obj) === "[Objekt Objekt]") {
        ret = {};
        für (lass i in obj) {
          ret[i] = dieses.cloneObj(obj[i]);
        }
        Rückkehr ret;
      } anders {
        gibt Objekt zurück;
      }
    },
    hinzufügen(a) {
      dies.addForm(a);
    },
    addForm(a) {
      lass arr = dieses.cloneObj(dieses.personObj);
      Konsole.log("arr", arr);
      dies.Liste.push(arr);
      A--;
      wenn (a > 0) {
        dies.addForm(a - 1);
      }
    },
    einreichen() {
      console.log("diese.Liste", diese.Liste);
    },
  },
};
</Skript>

<Stil>
</Stil>

Die Codeanalyse ist wie folgt:

Wenn Sie auf die Add-Methode der Schaltfläche klicken, wird die Gesamtzahl der Formulare übergeben. Anschließend werden in der addForm-Methode zum Hinzufügen des Formulars Selbstdekrement, Beurteilung und Rekursion verwendet, um das Kopieren beim kontinuierlichen Klicken zu implementieren. Dann versuchen wir den Effekt

Bildbeschreibung hier einfügen

Drucken Sie die Konsole

Bildbeschreibung hier einfügen

Dies ist das Ende dieses Artikels über das Beispiel für die Schleife von Formularelementen in Vue. Weitere relevante Inhalte zu Vue-Schleifenformularelementen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • So verwenden Sie eine v-for-Schleife zum Generieren dynamischer Tags in Vue.js
  • 7 Möglichkeiten zum Schreiben einer Vue v-for-Schleife
  • Attribute im Vue V-For-Loop-Objekt
  • Implementierung einer zirkulären Scroll-Listenfunktion basierend auf Vue
  • Ein Beispiel für die Implementierung einer einfachen Endlosschleifen-Scrolling-Animation in Vue
  • Dieser Artikel zeigt Ihnen den Event-Loop-Mechanismus von vue.js

<<:  Beheben Sie das Problem, dass die Alibaba Cloud SSH-Remoteverbindung nach kurzer Zeit getrennt wird

>>:  Über MySQL müssen Sie die Datentypen und Operationstabellen kennen

Artikel empfehlen

Beschreiben Sie kurz den Unterschied zwischen Redis und MySQL

Wir wissen, dass MySQL ein persistenter Speicher ...

Detaillierte Erläuterung der ActiveMQ-Bereitstellungsmethode in der Linux-Umgebung

Dieser Artikel beschreibt die Bereitstellungsmeth...

MySQL-Index für Anfänger

Vorwort Da die wichtigste Datenstruktur im MySQL-...

Analyse des Prinzips und der Funktion der MySQL-Datenbank-Master-Slave-Replikation

Inhaltsverzeichnis 1. Datenbank-Master-Slave-Klas...

Zusammenfassung der Zeilenumbruchprobleme bei Textbereichen in HTML

Kürzlich stieß ich auf das Problem, ob die Daten b...

4 Scan-Tools für den Linux-Desktop

Obwohl die papierlose Welt noch nicht angebrochen...

Beispiel für die MySQL-Methode zum Löschen von Daten und Datentabellen

Es ist sehr einfach, Daten und Tabellen in MySQL ...

Zeichnen Sie ein Herz mit CSS3

Ergebnisse erzielenAnforderungen/Funktionalität: ...

Lösung für das Problem, dass es beim Klicken auf „Alles auswählen“ in der Shuttle-Box von Element bei großen Datenmengen hängen bleibt

Inhaltsverzeichnis Lösung 1: Kopieren Sie die Übe...

Detaillierte Erläuterung verschiedener Kommunikationswege zwischen Linux-Benutzerstatus und Kernelstatus

Aufgrund der Einschränkung der CPU-Berechtigungen...

So drucken Sie hervorgehobenen Code in der Node.JS-Konsole

Vorwort Wenn der Code ausgeführt wird und ein Feh...

Detaillierte Erläuterung zur Verwendung von Node.js zum Implementieren einer Hot-Reload-Seite

Vorwort Vor nicht allzu langer Zeit habe ich Brow...

HTML setzt Fett-, Kursiv-, Unterstrichen-, Durchstreich- und andere Schrifteffekte

<p><b>Dies ist eine fette Schriftart&l...

Ausführliche Erläuterung versteckter Felder, einer neuen Funktion von MySQL 8.0

Vorwort MySQL Version 8.0.23 fügt eine neue Funkt...

Richtige Verwendung der Vue-Funktion Anti-Shake und Throttling

Vorwort 1. Entprellen: Nach dem Auslösen eines Ho...