<!-- 需要一個動態的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保持一致.變成無法控制到.問題出現的環境背景及自己嘗試過哪些方法相關代碼// 請把代碼文本粘貼到下方（請勿用圖片代替代碼）你期待的結果是什么？實際看到的錯誤信息又是什么？
1 回答
MYYA
TA貢獻1868條經驗 獲得超4個贊
看你代碼 useCustom循環出來的uc不就是對象的屬性名嗎？提前配置好全部rules，直接把uc給el-form-item當作prop不行嗎？
或者也可以比較傻的直接把rules定義在循環中的el-form-item上
<el-form-item
prop="email"
label="郵箱"
:rules="[
{ required: true, message: '請輸入郵箱地址', trigger: 'blur' },
{ type: 'email', message: '請輸入正確的郵箱地址', trigger: ['blur', 'change'] }
]"
>剛抽空按你邏輯寫了段測試代碼，是可行的，能正常驗證
template
<el-form :model="msgForm.msgShopName">
<div v-for="(uc, index) in useCustom" :key="index">
<el-form-item
:prop="uc"
:rules="[ { required: true, trigger: 'blur' } ]">
<!-- msgShopName是個對象, 通過拿到uc值 來動態渲染出input框 a框, b框, c框-->
<el-input v-model="msgForm.msgShopName[uc]" :placeholder="uc" style="margin-left: 4px; width: 200px"></el-input>
</el-form-item>
</div></el-form>script
export default {
data() {
return {
useCustom: ['name', 'mobile'],
msgForm: {
msgShopName: {}
},
}
}
}添加回答
舉報
0/150
提交
取消