Vue implementiert eine kleine Formularvalidierungsfunktion

importiere „Erstellen“ aus „@/views/create/create.vue“;

//Der erste Buchstabe des angezeigten Namens sollte groß geschrieben werden. Das folgende Verzeichnis ist das Verzeichnis, in dem sich Ihre Formularseite befindet. @ ist die Abkürzung von .., was bedeutet, dass Sie zur vorherigen Ebene zurückkehren. const router = new Router ({
Modus: „Verlauf“//Dies ist der Routenmodus. Routen: [
{
      Pfad: "/create", //Standard ist /. Bei mehreren Pfaden ist es / plus der Pfadname: "create",
      Komponente: Erstellen,
      Titel: "Formular",
    },
]
})

<router-link :to="{ name: 'create' }" class="collection">Formular</router-link>

<Vorlage>
  <div Klasse="erstellen">
    <h2>Willkommen zur Veröffentlichung eines neuen Rezepts. Bitte stellen Sie zuerst Ihr Meisterwerk vor! </h2>
    <Abschnitt Klasse="Erstellen-Einführen">
      <h5>Titel</h5>
 
      <el-Eingabe
        v-Modell="backData.title"
        Klasse="Eingabe erstellen"
        Platzhalter="Bitte Inhalt eingeben"
      ></el-Eingabe>
      <h5>Attribute</h5>
      <div>
        <el-Auswahl
          v-for="Element in Eigenschaften"
          :Schlüssel="Artikel.übergeordneter_Name"
          :Platzhalter="Artikel.übergeordneter_Name"
          v-Modell = "backData.Eigenschaft[Element.Titel]"
        >
          <el-Option
            v-for="Option in Artikelliste"
            :Schlüssel="Option.Typ"
            :label="Optionsname"
            :Wert="Option.Typ"
          >
          </el-Option>
        </el-Auswahl>
      </div>
      <h5>Rezeptkategorien</h5>
      <div>
        <el-select placeholder="Bitte wählen Sie die Rezeptkategorie" v-model="backData.classify">
          <el-Optionsgruppe
            v-for="Gruppe in Klassen"
            :Schlüssel="Gruppe.übergeordneter_Typ"
            :label="Gruppe.übergeordneter_Name"
          >
            <el-Option
              v-for="Element in Gruppenliste"
              :Schlüssel="Artikeltyp"
              :label="Artikelname"
              :Wert="Artikeltyp"
            >
            </el-Option>
          </el-Optionsgruppe>
        </el-Auswahl>
      </div>
      <h5>Bild des fertigen Produkts (328*440)</h5>
      <div Klasse="Upload-Img-Box Clearfix">
        <div Klasse="Hochladen-Bild">
          <Bild hochladen
            Aktion="/api/upload?Typ=Produkt"
            :img-url="backData.produkt_bild_url"
            @res-url="
              (Daten) => {
                zurückDaten, (Produktbild-URL = data.res);
              }
            "
          ></upload-img>
        </div>
        <el-Eingabe
          Klasse = "Text einführen"
          Typ="Textbereich"
          :Zeilen="10"
          Platzhalter="Bitte Inhalt eingeben"
        >
        </el-Eingabe>
      </div>
    </Abschnitt>
 
    <h2>Erfassen Sie alle Rohstoffe</h2>
    <Abschnitt Klasse="Erstellen-Einführen">
      <h5>Hauptzutaten</h5>
      <!--[ { "name": "", "specs": "" }, { "name": "", "specs": "" }, { "name": "", "specs": "" } ]-->
      <Stuff v-model="backData.Rohmaterial.Hauptmaterial"></Stuff>
      <h5>Zubehör</h5>
      <Stuff v-model="backData.raw_material.accessories_material"></Stuff>
    </Abschnitt>
 
    <h2>Beginnen Sie, die Schritte aufzuschreiben! Ob es leicht zu lernen ist, hängt davon ab, wie Sie es schreiben. Viel Glück! </h2>
    <Abschnitt Klasse="Erstellen-Einführen">
      <Hochladen v-for="(item, index) in 3" :key="index"></Hochladen>
      <el-Schaltfläche
        Klasse = "eaeaea-Hinzufügeschritt-Schaltfläche"
        Typ="primär"
        Größe="mittel"
        Symbol="el-icon-plus"
        @click="hinzufügen"
        >Einen Schritt hinzufügen</el-button
      >
      <h5>Kochtipps</h5>
      <el-Eingabe
        Klasse = "Einführungstext"
        Typ="Textbereich"
        :Zeilen="8"
        placeholder="Teilen Sie Ihre Erfahrungen und Tipps zur Zubereitung dieses Gerichts!"
      >
      </el-Eingabe>
    </Abschnitt>
 
    <el-button Klasse="senden" Typ="primär" Größe="mittel" :icon="Symbol"
      >Fertig, zur Überprüfung absenden</el-button
    >
  </div>
</Vorlage>
<Skript>
importiere Sachen aus "./stuff";
Upload von "./step-upload" importieren;
importiere UploadImg von "@/components/upload-img";
importiere { getProperty, getClassify, publish } von "@/service/api";
 
const Rohmaterialstruktur = {
  Name: "",
  Spezifikationen: "",
};
Standard exportieren {
  Name: "erstellen",
  Komponenten: { Stuff, Upload, UploadImg },
  Daten() {
    zurückkehren {
      zurückDaten: {
        Titel: "",
        Eigentum: {},
        klassifizieren: "",
        Produktbild-URL: "",
        Produktgeschichte: "",
        Rohmaterial: {
          Rohmaterial: Array(3)
            .füllen(1)
            .map(() => ({ ...Rohmaterialstruktur })),
          Zubehörmaterial: Array(3)
            .füllen(1)
            .map(() => ({ ...Rohmaterialstruktur })),
        },
      },
      Eigenschaften: [],
      klassifiziert: [],
    };
  },
  montiert() {
    getProperty().then(({ data }) => {
      konsole.log(Daten);
      this.propertyies = Daten;
      this.backData.property = data.reduce((o, item) => {
        o[Artikeltitel] = "";
        Rückkehr o;
      }, {});
      // konsole.log(Daten);
      // konsole.log(diese.backData.Eigenschaft)
    });
    getClassify().then(({ Daten }) => {
      konsole.log(Daten);
      this.classifies = Daten;
    });
  },
  Methoden: {
    hinzufügen() {
      konsole.log(1);
    },
  },
};
</Skript>
<style lang="stylus">
 
 
.erstellen-einführen
  Hintergrundfarbe #fff
  Polsterung 20px
 
 
  .Schritt-hinzufügen-Schaltfläche
    Rand links 100px
 
 
.erstellen
  Breite 100%
  h2
    Text zentriert ausrichten
    Rand 20px 0
  .schicken
    // ff3232()
    Höhe: 70px;
    Breite: 220px;
    Hintergrund #ff3232
    Farbe #fff
    Grenze keine
    Rand 20px automatisch
    Anzeigeblock
 
  h5
    Rand 20px 0
 
 
.create-input Eingabe
  Breite 446px
  Zeilenhöhe 22px
.Bildbox hochladen
  .Bild hochladen
    nach links schweben
  .Einführungstext
    nach links schweben
  .el-Textbereich
    Breite 60%
    Rand links 10px
</Stil>