Detaillierte Erläuterung, wie Vue Werte zurückgibt, um Formulare dynamisch zu generieren und Daten zu übermitteln

// Die vom Backend zurückgegebenen Daten werden je nach Rückgabetyp mit der entsprechenden Komponente verwendet [
	{
	    "Komponententyp": "Eingabe",
	    "componentName": "Benutzername",
	    "erforderlich": "1", // Ob es beim Absenden ausgefüllt werden muss "Name": "Name",
	},
	{
        "Komponententyp": "Radio",
        "Komponentenname": "Geschlecht",
        "erforderlich": "1",
        "Name": "Geschlecht",
        "Optionen": [
            {
                "name": "Männlich",
                "Wert": "0000"
            },
            {
                "name": "Weiblich",
                "Wert": "1111"
            }
        ]
   }
]
// An den Server übermitteltes Datenformat {
	Benutzername: 'Mein Name',
	Geschlecht: '0000' // entspricht "männlich"
}

<Vorlage>
  <div Klasse="Seitencontainer">
      <div Klasse="dynamischer Inhalt">
        <div v-for="(item,idx) in infoList" :key="idx">
          <input class="common-input" v-model="modelItems[idx]" v-if="item.componentType=='input'">
          <van-radio-group v-model="modelItems[idx]" direction="horizontal" v-if="item.componentType=='radio'">
            <van-radio :name="itemRadio.value" v-for="itemRadio in item.options" :key="itemRadio.value">
              {{itemRadio.name}}
            </van-radio>
          </van-radio-group>
        </div>
        <div class="common-btn" @click="clickSubmit">Daten übermitteln</div>
      </div>
  </div>
</Vorlage>
<Skript>
Vue von „vue“ importieren
importiere { getListData } von '@/api/home'
importiere { RadioGroup, Radio } von 'vant'
Vue.use(Radio).use(RadioGruppe)
Standard exportieren {
  Daten() {
    zurückkehren {
      modelItems: {}, // Vue muss beim Loopen verschiedene V-Modelle dynamisch binden
      infoListe: []
    }
  },
  montiert() {
    diese.formKeyArr = []
    dies.getList()
  },
  Methoden: {
    Liste abrufen() {
      getListData()
        .then((res) => {
          const infoListData = res.infoList
          this.infoList = infoListData
          infoListData.forEach((item, index) => {
          	// Speichert den Attributnamen und ob dieser erforderlich ist, da dieser für die nachfolgende Datenübertragung verwendet wird // { name: 'username', type: 1 }, { name: 'sex', type: 1}
            this.formKeyArr.push({ Name: Artikel.Komponentenname, Typ: Artikel.erforderlich })
          })
        })
        .fangen(() => {
        })
    },
    klicke aufSenden() {
      const postParams = {} // Übermittelte Daten let isCanSubmit = true
      dies.formKeyArr.forEach((item, index) => {
        Konsole.log('Element=', Element)
        if (item.type === '1' && !this.modelItems[index]) { // Alle Tags erfordern // Bitte füllen Sie zuerst das Formular aus, bitte füllen Sie das Toast-Formular vollständig aus isCanSubmit = false
        }
        postParams[Element['Name']] = dieses.ModellElemente[Index]
      })
      wenn (istKannSenden) {
      	//Kann Daten übermitteln //Kann die übermittelten Formulardaten abrufen //{ Benutzername: 'mein Name', Geschlecht: '0000' //entspricht "männlich" }
      	console.log('postParams=', postParams)
      }
    }
  }
}
</Skript>
<style lang="scss">
</Stil>