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

Zwei Implementierungslösungen für die Vuex-Datenpersistenz

Inhaltsverzeichnis Geschäftsanforderungen: Lösung...

Detaillierte Erklärung, warum die gemeinsame Verwendung von v-if und v-for in Vue nicht empfohlen wird

In diesem Artikel wird hauptsächlich erläutert, w...

Konfiguration der primären Netzwerk-Portzuordnung für Docker

Portzuordnung Wenn vor dem Start des Docker-Conta...

Lösen Sie das Problem, dass der Standardwert des CSS3-Übergangsverzögerungsattributs 0 ohne Einheit ist und ungültig ist

Heute möchte ich mit Ihnen teilen, dass der Stand...

Fehlerbehebung und Lösungen für das Problem der MySQL-Autoinkrement-ID-Übergröße

Einführung Xiao A war gerade dabei, Code zu schre...

Datenbankprobleme und Fallstricke bei der Verbindung zu Cloud-Servern mit Navicat Premium15

Bei Verwendung eines Cloud-Servers stellen wir ma...

MySQL MSI-Version herunterladen und installieren - ausführliches grafisches Tutorial für Anfänger

Inhaltsverzeichnis 1. Laden Sie die MySQL-MSI-Ver...

Vue realisiert den Logistik-Timeline-Effekt

In diesem Artikelbeispiel wird der spezifische Co...

Analyse der MySQL-Transaktionsmerkmale und Ebenenprinzipien

1. Was ist eine Transaktion? Eine Datenbanktransa...

Zusammenfassung mehrerer Haltungen, die bei der Linux-Kompilierungsoptimierung beherrscht werden müssen

01. Kompilierungsoptionen und Kernelkompilierung ...

Prinzip und Anwendungsbeispiele des URL-Umschreibmechanismus von Nginx

Durch das Umschreiben der URL lässt sich die bevo...

So lösen Sie das Problem, dass nach dem Senden der HTML-Formulareingabe kein Formularwert angezeigt wird, indem Sie deaktivierte

Nachdem die Eingabe im Formulareingabefeld auf da...

Details zum MySQL-Datentyp

Inhaltsverzeichnis 1. Numerischer Typ 1.1 Klassif...

So verwenden Sie boost.python, um die dynamische C++-Bibliothek unter Linux aufzurufen

Vorwort Vor Kurzem habe ich begonnen, Robot Frame...

Wichtige Punkte zum Schreiben von Inhalten für META-Tags in HTML-Webseiten

Das META-Tag ist ein Hilfstag im Kopfbereich der ...