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

HTML+CSS zum Erstellen eines einfachen Fortschrittsbalkens

1. HTML-Code Code kopieren Der Code lautet wie fo...

So verwenden Sie Axios-Anfragen im Vue-Projekt

Inhaltsverzeichnis 1. Installation 2. Es gibt kei...

So ändern Sie den Inhalt eines vorhandenen Docker-Containers

1. Docker ps listet Container auf 2. Docker cp ko...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15 unter Win10

In diesem Artikel werden die Installations- und K...

CSS-Lösung für mehrspaltiges Layout

1. Feste Breite + adaptiv Erwarteter Effekt: fest...

Detaillierte Erklärung der JavaScript-Array-Deduplizierung

Inhaltsverzeichnis 1. Array-Deduplizierung 2. Ded...

Sprechen Sie über das Verständnis des CSS-Attributrands

1. Was ist eine Marge? Mit dem Rand wird die Abstä...

So leeren Sie den Cache nach der Verwendung von Keep-Alive in Vue

Was ist Keepalive? Bei der normalen Entwicklung m...

Tiefgreifendes Verständnis des Vue-Übergangs und der Animation

1. Wenn Sie DOM-Elemente einfügen, aktualisieren ...

Implementierungscode für die teilweise Aktualisierung einer HTML-Seite

Aktualisierung der Ereignisantwort: Aktualisierun...

Mögliche Gründe, warum das Eingabetag type="reset" in HTML ungültig ist (nicht funktioniert).

Bei Verwendung des Tags <html:reset> stellen...

Detaillierte Analyse der MySQL-Sperrblockierung

Bei der täglichen Wartung werden Threads häufig b...

Zusammenfassung zum Ändern des Root-Passworts in MySQL 5.7 und MySQL 8.0

MySQL 5.7-Version: Methode 1: Verwenden Sie den B...

CSS Houdini erzielt einen dynamischen Welleneffekt

CSS Houdini gilt als die aufregendste Innovation ...

Grafisches Tutorial zur Installation und Konfiguration der MySQL 5.7.21-Dekomprimierungsversion

In diesem Artikel wird der detaillierte Vorgang z...