动态创建和验证表单

Question

我的应用程序将包含> 10种类型的对象，我希望它们允许用户修改它们的某些属性。这些对象中的每一个都有一个接口来定义其属性。每个对象还将具有一个架构，该架构将定义哪些属性是可编辑的，并提供验证规则和相应的消息，目前正在yup处创建该架构。

我想创建一个可用于所有这些对象类型的表单组件。需要对表单提交进行验证，最好使用VeeValidate。我想创建某种类型的东西：

                <div v-for="(prop, index) in object">
                    <label>{{prop.name}}</label>
                    <input type={{prop.type}} v-model="modulesForm.name" :v-validate=prop.validations :name=prop.name>
                    <span v-show="errors.has('prop.name')" class=error> {{errors.first('prop.name')}}</span>
                </div>

除此以外，我不知道如何实现这一点，非常感谢任何帮助。