Elementui prop dynamic verification

 <!-- 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>

my requirement is simple: add verification to each dynamically rendered input, making it a required form.
1. Simply try to write required, directly on the input box to make the input box required, but the result is invalid.
2. Tried to add rules rules directly. However, the effect is not good, and the verification is not accurate.

the problem I encountered is that prop is generally consistent with the validated control, but on my side, because the validated control msgShopName is not fixed, prop can not be consistent with msgShopName. Become uncontrollable.

the environmental background of the problems and what methods you have tried

related codes

/ / Please paste the code text below (do not replace the code with pictures)

what result do you expect? What is the error message actually seen?

Vue.js
Apr.09,2021

look at the useCustom loop of your code uc is not the property name of the object? Configure all rules in advance and directly treat uc as el-form-item as prop .
or you can foolishly define rules on el-form-item in the loop

. 
<el-form-item
    prop="email"
    label=""
    :rules="[
      { required: true, message: '', trigger: 'blur' },
      { type: 'email', message: '', trigger: ['blur', 'change'] }
    ]"
  >

just took the time to write a piece of test code according to your logic, which is feasible and can be verified normally

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: {}
      },
    }
  }
}

Previous: [solved] request Mini Program ui component 2018-12-11 update-ultimate solution

Next: Javascript obtains the data of multi-dimensional array through one-dimensional array.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e493c4-437f5.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e493c4-437f5.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?