After traversing the generated form form, the el-input cannot be input

When using the form of Element Plus, for multiple repeated form items, it is better to use traversal than enumeration in terms of code readability and simplification.

When binding values ​​for the form, I stepped on a pit today.

Vue3 setup syntax + typescript used in this article

In the case of enumerating the content of the form below, if there are more than one form item, it will often lead to code redundancy.

  <!-- vue部分 -->
 <el-form
        :model="FormData"
        label-width="120px"
        ref="FormRef" 
      >
        <el-form-item label="序号" prop="key">
          <el-input v-model="FormData.key" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="FormData.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="年龄" prop="age">
         <el-input v-model="FormData.age" placeholder="请输入" />
        </el-form-item>
  </el-form>

  <!-- ts部分 -->
<script setup lang="ts">
//如果reactive报错则加import {reactive} from 'vue'
    const FormData=reactive({
    key:'',
    name:'',
    age:null
})
</script>

The code runs, and the form looks like this, which is a very simple form:

Then when I try to use the traversal method to output the form:

//ts部分

//首先是表单本身，和form直接绑定的
const FormData = reactive<any>({
    age:null,
    name:'',
    time:'',
})

//获取当前时间
const nowDate = new Date()
nowDate.setMonth(new Date().getMonth())

//然后是遍历表单所需要的数据
interface FormType {
    label:string, //每个表单项前的提示文本
    prop:string, //属性，后续用来绑定值
    placeholder?:string, //问号表示这个属性可有可无
    type:string //表单项类型，除了input框，可能还有其他的类型
}

Then the next step is to write the content to be traversed.

There is no problem with the above part, but when writing the content array, do not use the following writing method:

//进行遍历的内容，即表单项
const FormInfo:FormType[]=[
    {
        label:'姓名',
        prop:FormData.name,
        placeholder:'请输入',
        type:'input'
    }
]

//vue部分
<el-form-item v-for="item in FormInfo" :label="item.label">
          <el-input
            v-if="item.config === 'input'"
            v-model="item.prop"
            :placeholder="item.palceholder"
          />
 </el-form-item>

Although the form can be displayed normally at this time, it can soon be found that the input input box cannot be entered, no matter what is typed, it just cannot be entered

Although in a sense, the v-model of the form is bound to FormData, but the code does not recognize it, it must be in the form of FormData.xxx or FormData[xxx].

The following is the correct way to write:

const FormInfo:FormType[]=[
    {
        label:'姓名',
        prop:'name',
        placeholder:'请输入',
        type:'input'
    },
    {
        label:'年龄',
        prop:'age',
        placeholder:'请输入',
        type:'input'
    },
    {
        label:'时间',
        prop:'time',
        placeholder:'请输入日期',
        type:'date'
    },
]


//vue部分
<el-form :model="FormData" label-width="120px" ref="apiFormRef">
        <el-form-item v-for="item in FormInfo" :label="item.label">
          <el-input
            v-if="item.config === 'input'"
            v-model="apiFormData[item.prop]"
            :placeholder="item.palceholder"
          />
 <!-- 让日期选择器自动选定今日 -->
          <el-date-picker
            v-if="item.config === 'date'"
            v-model="apiFormData[item.prop]"
            type="date"
            :placeholder="item.palceholder"
            :default-value="nowDate"
          />
        </el-form-item>
</el-form>

The effect is as follows:

In this way, the problem that the input cannot be input due to traversal binding errors is solved.