vue.js - 如何动态加载表单元素及其属性

Question

我想动态加载模板及其表单元素。

所需的输出：

我想动态加载所有这些字段，以便表单应该是通用的，并且我可以对项目中的所有表单使用相同的模板。

我试过的代码：

<template>
 <b-card>
   <b-row>
            <b-col sm="3">
              <b-form-group>
                <label v-for="option in labelNames">{{ option.name }}</label>
                <input :type="text" :id="name"  :class="form-control" :placeholder="Enter your name" :v-validate="'required|Name'" :name="Firstname" v-model="firstName">
                        <span v-show="errors.has(':name')" class="is-danger">{{ errors.first(':name') }}</span>
               </b-form-group>
            </b-col>
            </b-row>
 </b-card>
</template>

<script>

export default {
  name: 'addEmpl',
  data () {
    return {
      labelNames: [
        { name: 'FirstName'},
        { name: 'LastName'},
        { name: 'MiddleName'},
        { name: 'EmployeeID'},
        { name: 'Gender'},
        ],
     inputs: [
        { type: 'text', id : 'name1', class : 'form-control' placeholder : 'Enter your name' name: 'Firstname' v-validate : 'required'},
        { type: 'text', id : 'name2', class : 'form-control' placeholder : 'Enter your middle name' name: 'Middlename' v-validate : 'required'},
        { type: 'text', id : 'name3', class : 'form-control' placeholder : 'Enter your last name' name: 'Lastname' v-validate : 'required'},
        ],
    }
  } 
}
</script>

请建议我一个更好的选择来做通用表格。提前致谢