Vue が値を返してフォームを動的に生成し、データを送信する仕組みの詳細な説明

// バックエンドから返されたデータは、戻り値の型に応じて対応するコンポーネントで使用されます [
	{
	    "コンポーネントタイプ": "入力",
	    "コンポーネント名": "ユーザー名",
	    "required": "1", // 送信時に入力が必須かどうか "name": "名前",
	},
	{
        "コンポーネントタイプ": "ラジオ",
        "コンポーネント名": "性別",
        "必須": "1",
        "名前": "性別",
        「オプション」: [
            {
                "名前": "男性",
                "値": "0000"
            },
            {
                "名前": "女性",
                "値": "1111"
            }
        ]
   }
]
// サーバーに送信されるデータ形式 {
	ユーザー名: '私の名前',
	sex: '0000' // 「男性」に相当
}

<テンプレート>
  <div class="ページコンテナ">
      <div class="dynamic-content">
        <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="horizo​​ntal" v-if="item.componentType=='radio'">
            <van-radio :name="itemRadio.value" v-for="item.options 内のitemRadio" :key="itemRadio.value">
              {{itemRadio.name}}
            </バンラジオ>
          </バンラジオグループ>
        </div>
        <div class="common-btn" @click="clickSubmit">データを送信</div>
      </div>
  </div>
</テンプレート>
<スクリプト>
'vue' から Vue をインポートします
'@/api/home' から { getListData } をインポートします。
'vant' から { RadioGroup, Radio } をインポートします。
Vue.use(ラジオ).use(ラジオグループ)
エクスポートデフォルト{
  データ（） {
    戻る {
      modelItems: {}, // Vue はループ時に異なる v-model を動的にバインドする必要があります
      情報リスト: []
    }
  },
  マウント() {
    this.formKeyArr = []
    このリストを取得する()
  },
  メソッド: {
    getList() {
      リストデータを取得する()
        .then((res) => {
          定数 infoListData = res.infoList
          this.infoList = 情報リストデータ
          infoListData.forEach((アイテム、インデックス) => {
          	// 属性名とそれが必須かどうかを保存します。これは、後続のデータ送信に使用されます // { name: 'username', type: 1 }, { name: 'sex', type: 1}
            this.formKeyArr.push({ 名前: item.componentName、 タイプ: item.required })
          })
        })
        .catch(() => {
        })
    },
    クリック送信() {
      const postParams = {} // 送信されたデータ let isCanSubmit = true
      this.formKeyArr.forEach((item, index) => {
        console.log('item=', アイテム)
        if (item.type === '1' && !this.modelItems[index]) { // すべて必須タグ // 最初にフォームに記入してください。トーストフォームを完全に記入してください isCanSubmit = false
        }
        postParams[item['name']] = this.modelItems[index]
      })
      if (isCanSubmit) {
      	//データを送信できます //送信されたフォームデータを取得できます //{ username: 'my name', sex: '0000' //「男性」に相当 }
      	コンソールログ('postParams=', postParams)
      }
    }
  }
}
</スクリプト>
<スタイル lang="scss">
</スタイル>