Detaillierte Anwendung des dynamischen Vue-Formulars

<Eingabetyp="Text" v-Modell="Ding">

<!-- Äquivalent zu -->
<Eingabetyp="Text" v-bind:Wert="Ding" 
       v-on:input="Ding = $event.target.value">

<!-- Antwort.vue -->
<Vorlage>
  <div>
    <li>
      <div v-if="data.id != 0" @click="getfid(data.id)" :id="data.id"> {{ data.name }}</div>
      <ul v-if="Daten.Kinder && Daten.Kinder.Länge > 0">
        <Antwort v-for="Kind in data.children" :key="Kind.id" :data="Kind"/>
      </ul>
    </li>
  </div>
</Vorlage>

<Skript>

  Bus aus „./bus.js“ importieren;

  Standard exportieren {

    //Name deklarieren: "Antworten",
    Requisiten: ['Daten'],
    //Komponenten deklarieren Komponenten: {},
    //Variable data() deklarieren {
      zurückkehren {
        fid: 0,
      }
    },
    //Benutzerdefinierte Filter Filter: {
      myfilter: Funktion (Wert) {
        Wert = Wert.Slice(0, 3);
        Rückgabewert + "********";
      }
    },
    // Initialisierungsmethode mounted() {
    },
    //Methoden deklarieren methods: {
      //Klicken Sie auf die Kategorie-ID
      getfid: Funktion (fid) {
        dies.fid = fid;
        //Konsole.log(diese.fid);
        bus.$emit("msg", fid);
        localStorage.setItem("fid", diese.fid);

        //Alle Hervorhebungen abbrechen var divs = document.getElementsByClassName("bg");

        //Durchlaufe den Selektor für (var i = divs.length - 1; i >= 0; i--) {

          //Hervorhebung abbrechen divs[i].classList.remove("bg");

        }
        //Markieren Sie zuerst das aktuelle Element var mydiv = document.getElementById(fid);
        //Highlight-Klassenselektor dynamisch hinzufügen mydiv.classList.add("bg");
      }
    }
  }
</Skript>


<Stil>

  ul {
    Polsterung links: 10rem;
    Listenstil: keiner;
  }

  .bg {
    Hintergrund: orange;
    Farbe: weiß;
  }
</Stil>

<!--bus.js-->
Vue von „vue“ importieren

exportiere standardmäßig neues Vue();

<Vorlage>
  <div>
    <Köpfe></Köpfe>
    <h1>Seite zur Kurseinreichung</h1>
    <Antwort: Daten = "Meine Daten"/>
    <van-cell-gruppe>
      <van-field label="Kurstitel" v-model="title"/>
      <van-field label="Kursbeschreibung" v-model="desc" rows="5" type="textarea"/>
      <van-field label="Kurspreis" v-model="Preis"/>

      <div v-for="(Wert, Schlüssel, Index) in Parametern">
        <van-field :label="Schlüssel" v-model="info[Schlüssel]"/>
      </div>

      <van-button color="gray" @click="addcourse">Kurs speichern</van-button>
    </van-cell-group>
  </div>
</Vorlage>

<Skript>

  //Andere Komponenten importierenimport bus from './bus.js';
  Antwort aus "./reply" importieren;
  Köpfe aus "./heads" importieren;


  Standard exportieren {

    //Komponenten deklarieren: {
      'Antwort': Antwort,
      'Köpfe': Köpfe,
    },
    //Konstruktor erstellt() {
      //Bus überwachen.$on('msg', target => {
        konsole.log(Ziel);
        dies.fid = Ziel;
        wenn (this.cid === 0) {
          dies.get_cate(diese.fid)
        } anders {
          this.$toast.fail("Sie haben den Kurs bereits gespeichert und können die Kategorie nicht erneut auswählen");
          gibt false zurück;
        }
      });
    },
    //Variable data() deklarieren {
      zurückkehren {
        //Daten meineDaten: {},
        //Kurskategorie-ID
        fid: localStorage.getItem("fid"),
        Titel: "",
        Preis: "",
        Beschreibung: "",
        CID: 0,
        Videos: [],
        videosrc: "",
        Parameter: {},
        Information: {}
      }
    },
    // Initialisierungsmethode mounted() {
      dies.get_data();
    },
    //Methoden deklarieren methods: {
      get_cate(fid) {
        dies.axios.get('http://localhost:5000/getcate/', {params: {'fid': fid}}).dann(Ergebnis => {
          var myparams = result.data.params;
          wenn (myparams === '') {
            meineparams = null
          }
          meineparams = JSON.parse(meineparams)
          diese.params = meineparams

          für (var Schlüssel in this.params) {
            dies.$set(diese.info, Schlüssel, '')
          }
          console.log(diese.info)
        })
      },
      //Kurs hinzufügen addcourse: function () {
        var Listen = [];
        für (var-Schlüssel in this.info) {
          lists.push({'Schlüssel': Schlüssel, 'Wert': this.info[Schlüssel], 'Bezeichnung': this.params[Schlüssel]})
        }

        var list_str = JSON.stringify(Listen)

        var data_post = {
          fid: diese.fid,
          Titel: dieser.Titel,
          Beschreibung: diese.Beschreibung,
          Preis: dieser.Preis,
          ID: localStorage.getItem("Benutzer-ID"),
        }
        wenn (Listenlänge > 0) {
          Datenpost = {
            fid: diese.fid,
            Titel: dieser.Titel,
            Beschreibung: diese.Beschreibung,
            Preis: dieser.Preis,
            ID: localStorage.getItem("Benutzer-ID"),
            Parameter:list_str
          }
        }

        dieser.axios.post(
          „http://localhost:5000/addcourse/“,
          dies.qs.stringify(data_post)).then((Ergebnis) => {
          wenn (Ergebnis.Daten.Code === 200) {
            this.$toast.success('Kurs erfolgreich hinzugefügt');
            dies.cid = Ergebnis.Daten.cid;
          } anders {
            dies.$toast.fail(result.data.msg);
          }
        });
      },
      //Daten abrufen get_data: function () {
        //Anfrage senden this.axios.get(
          'http://localhost:5000/catelist/').dann((Ergebnis) => {
          console.log(Ergebnis);
          //Deklariere den Stammknoten var mytree = {'id': 0, name: ""};
          mytree['Kinder'] = Ergebnis.Daten;
          dies.meineDaten = meinBaum;
          konsole.log(diese.meinedaten);
        });
      }
    }
  }
</Skript>


<Stilbereich>

  ul {
    Polsterung links: 10rem;
    Listenstil: keiner;
  }

</Stil>