elementui prop 动态验证

Question

 <!-- 需要一个动态的input 可以让用户根据不同资料填写,  -->
 <!-- useCustom  是一个动态数组里面 a, b, c, -->
   <div v-for="(uc, index) in useCustom" :key="index">
     <el-form-item >
        <!-- msgShopName是个对象,  通过拿到uc值 来动态渲染出input框 a框, b框, c框-->
        <el-input v-model="msgForm.msgShopName[uc]" :placeholder="uc" style="margin-left: 4px; width: 200px" required></el-input>
        </el-form-item>
   </div>

我的需求很简单, 为每个动态渲染出来的 input 增加验证,让他变成必填...
1.简单试过在input 框上 直接写上required, 来让input框变成必填, 结果无效. 
2.试过直接增加rules 规则. 不过效果不好,验证不准确.

我遇到的问题是: prop 一般要与 被验证的控件 一致, 但我这边因为 被验证的控件msgShopName是不固定的,让prop不能与msgShopName保持一致.变成无法控制到.

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

看你代码&nbsp;useCustom循环出来的uc不就是对象的属性名吗？提前配置好全部rules，直接把uc给el-form-item当作prop不行吗？或者也可以比较傻的直接把rules定义在循环中的el-form-item上<el-form-item &nbsp;&nbsp;&nbsp;&nbsp;prop="email" &nbsp;&nbsp;&nbsp;&nbsp;label="邮箱" &nbsp;&nbsp;&nbsp;&nbsp;:rules="[ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;required:&nbsp;true,&nbsp;message:&nbsp;'请输入邮箱地址',&nbsp;trigger:&nbsp;'blur'&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;type:&nbsp;'email',&nbsp;message:&nbsp;'请输入正确的邮箱地址',&nbsp;trigger:&nbsp;['blur',&nbsp;'change']&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;]" &nbsp;&nbsp;>刚抽空按你逻辑写了段测试代码，是可行的，能正常验证template<el-form&nbsp;:model="msgForm.msgShopName"> &nbsp;&nbsp;<div&nbsp;v-for="(uc,&nbsp;index)&nbsp;in&nbsp;useCustom"&nbsp;:key="index"> &nbsp;&nbsp;&nbsp;&nbsp;<el-form-item &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:prop="uc" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:rules="[&nbsp;{&nbsp;required:&nbsp;true,&nbsp;trigger:&nbsp;'blur'&nbsp;}&nbsp;]"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--&nbsp;msgShopName是个对象,&nbsp;&nbsp;通过拿到uc值&nbsp;来动态渲染出input框&nbsp;a框,&nbsp;b框,&nbsp;c框--> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-input&nbsp;v-model="msgForm.msgShopName[uc]"&nbsp;:placeholder="uc"&nbsp;style="margin-left:&nbsp;4px;&nbsp;width:&nbsp;200px"></el-input> &nbsp;&nbsp;&nbsp;&nbsp;</el-form-item> &nbsp;&nbsp;</div></el-form>scriptexport&nbsp;default&nbsp;{ &nbsp;&nbsp;data()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;useCustom:&nbsp;['name',&nbsp;'mobile'], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;msgForm:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;msgShopName:&nbsp;{} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;} }