使用 vuetify 动态创建表单答案

【问题标题】：Dynamic creation of form using vuetify使用 vuetify 动态创建表单
【发布时间】：2022-06-16 01:58:18
【问题描述】：

HTML代码：

<v-col cols="12" md="4" v-for="(leadObj, i) in lead.data" :key="i" >
      <v-col  v-if="leadObj.inputType !=='select'">
         <v-text-field
            v-model="leadObj.comment"
            :type="leadObj.inputType"
            :counter="50"
            :label="leadObj.field"   
          ></v-text-field>
       </v-col>
      <v-col v-if="leadObj.inputType ==='select'">
            <v-select
               v-model="leadObj.comment"
               :items="leadObj.jsonData"
               item-text="name"
               item-value="value"
               :label="leadObj.field"                              
             ></v-select>
      </v-col>
</v-col>

如果我打印leadObj 数据会像这样：

对于inputType 作为文本：

{ "id": 4, "field": "Name", "jsonData": null, "module": "Personal", "moduleName": null, "inputType": "text", "comment": "Maharashtra" },

对于inputType 选择：

{ "id": 5, "field": "Educational Details", "jsonData": [ { "name": "SSC", "value": "SSC", "id": 1 }, { "name": "HSC", "value": "HSC", "id": 2 }, { "name": "Diploma", "value": "Diploma", "id": 3 }, { "name": "Graduate", "value": "Graduate", "id": 4 }, { "name": "Post Graduate", "value": "Post Graduate", "id": 5 } ], "module": "Personal", "moduleName": null, "inputType": "select", "comment": "Graduate"},

对于inputType 作为电台：

{ "id": 6, "field": "gender", "jsonData": [ { "name": "Male", "value": "male", "id": 1 }, { "name": "Female", "value": "female", "id": 2 } ], "module": "Personal", "moduleName": null, "inputType": "radio","comment": "", "required": "required" }

如果:type="radio" 则单选按钮未正确填充。 vuetify 是否假设基于 :type 动态创建字段？对于选择，我需要添加 v-select 组件，否则它正在考虑 v-text-field，就像我想为 radio 和其他元素添加一样？

【问题讨论】：

请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： html vue.js vuetify.js

【解决方案1】：

对于单选按钮，组件是v-radio，但您对所有没有选择的输入类型使用v-text-field。使用基于inputType 的适当组件将解决此问题。

演示：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      lead: {
        data: [{ "id": 4, "field": "Name", "jsonData": null, "module": "Personal", "moduleName": null, "inputType": "text", "comment": "Maharashtra" }, { "id": 5, "field": "Educational Details", "jsonData": [ { "name": "SSC", "value": "SSC", "id": 1 }, { "name": "HSC", "value": "HSC", "id": 2 }, { "name": "Diploma", "value": "Diploma", "id": 3 }, { "name": "Graduate", "value": "Graduate", "id": 4 }, { "name": "Post Graduate", "value": "Post Graduate", "id": 5 } ], "module": "Personal", "moduleName": null, "inputType": "select", "comment": "Graduate"}, { "id": 6, "field": "gender", "jsonData": [ { "name": "Male", "value": "male", "id": 1 }, { "name": "Female", "value": "female", "id": 2 } ], "module": "Personal", "moduleName": null, "inputType": "radio","comment": "male", "required": "required" }]
      },
    }
  },
})

<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.6/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.6/dist/vuetify.min.css"/>

<div id="app">
  <div data-app v-for="(leadObj, i) in lead.data" :key="i">
    <v-select v-if="leadObj.inputType ==='select'"
               v-model="leadObj.comment"
               :items="leadObj.jsonData"
               item-text="name"
               item-value="value"
               :label="leadObj.field"
             ></v-select>
    <v-text-field v-if="leadObj.inputType ==='text'"
            v-model="leadObj.comment"
            :type="leadObj.inputType"
            :counter="50"
            :label="leadObj.field"
          ></v-text-field>
    <v-radio-group v-if="leadObj.inputType ==='radio'" v-model="leadObj.comment">
      <v-radio
        v-for="r in leadObj.jsonData"
        :key="r.name"
        :label="`${r.name}`"
        :value="r.value"
      ></v-radio>
    </v-radio-group>
  </div>
</div>

【讨论】：