第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

elementui prop 動(dòng)態(tài)驗(yàn)證

elementui prop 動(dòng)態(tài)驗(yàn)證

墨色風(fēng)雨 2018-08-18 20:20:16
 <!-- 需要一個(gè)動(dòng)態(tài)的input 可以讓用戶根據(jù)不同資料填寫,  -->  <!-- useCustom  是一個(gè)動(dòng)態(tài)數(shù)組里面 a, b, c, -->    <div v-for="(uc, index) in useCustom" :key="index">      <el-form-item >         <!-- msgShopName是個(gè)對(duì)象,  通過(guò)拿到uc值 來(lái)動(dòng)態(tài)渲染出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>我的需求很簡(jiǎn)單, 為每個(gè)動(dòng)態(tài)渲染出來(lái)的 input 增加驗(yàn)證,讓他變成必填...1.簡(jiǎn)單試過(guò)在input 框上 直接寫上required, 來(lái)讓input框變成必填, 結(jié)果無(wú)效. 2.試過(guò)直接增加rules 規(guī)則. 不過(guò)效果不好,驗(yàn)證不準(zhǔn)確.我遇到的問(wèn)題是: prop 一般要與 被驗(yàn)證的控件 一致, 但我這邊因?yàn)?被驗(yàn)證的控件msgShopName是不固定的,讓prop不能與msgShopName保持一致.變成無(wú)法控制到.問(wèn)題出現(xiàn)的環(huán)境背景及自己嘗試過(guò)哪些方法相關(guān)代碼// 請(qǐng)把代碼文本粘貼到下方(請(qǐng)勿用圖片代替代碼)你期待的結(jié)果是什么?實(shí)際看到的錯(cuò)誤信息又是什么?
查看完整描述

1 回答

?
MYYA

TA貢獻(xiàn)1868條經(jīng)驗(yàn) 獲得超4個(gè)贊

看你代碼 useCustom循環(huán)出來(lái)的uc不就是對(duì)象的屬性名嗎?提前配置好全部rules,直接把ucel-form-item當(dāng)作prop不行嗎?
或者也可以比較傻的直接把rules定義在循環(huán)中的el-form-item

<el-form-item
    prop="email"
    label="郵箱"
    :rules="[
      { required: true, message: '請(qǐng)輸入郵箱地址', trigger: 'blur' },
      { type: 'email', message: '請(qǐng)輸入正確的郵箱地址', trigger: ['blur', 'change'] }
    ]"
  >

剛抽空按你邏輯寫了段測(cè)試代碼,是可行的,能正常驗(yàn)證

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是個(gè)對(duì)象,  通過(guò)拿到uc值 來(lái)動(dòng)態(tài)渲染出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: {}
      },
    }
  }
}


查看完整回答
反對(duì) 回復(fù) 2018-08-19
  • 1 回答
  • 0 關(guān)注
  • 3767 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)