At that time, when I was using Element-UI to develop background projects, I encountered array fields in the form that needed to be verified, so I tried several ways to write them, but failed. I even didn’t know how to describe them, and searched baidu for other people’s experience for reference. Now I have recorded this phenomenon for my convenience. I also hope to help you who have not yet encountered or will soon encounter this problem.

Demand at that time:

If you select the allowed number of extra beds, a template for the selected number of extra beds will be automatically created. The template field contains the type of extra beds and whether the extra beds are free. An extra bed template is an array, and the fields in each template (extra bed type, free or not) also need to be validated.

First post a screenshot of the effect

Part of the source code is pasted below, and then explained:

The part of the code in form4.vue that needs to be verified

<el-form 
  :model="form" 
  label-position="top"
  v-show="stepIndex==0"
 >
    <template v-if="form.allowExtraBed == 1">
      <div v-for="(item, index) in form.extraBedData" :key="index">
        <div class="area-wrapper">
          <h3>{{index + 1}}</h3>

          <el-form-item
            label="Extra bed type"
            :prop="`extraBedData.${index}.extraBedType`"
            verify
          >
            <el-select
              v-model="item.extraBedType"
              placeholder="Please select"
              style="width: 100%"
              clearable
            >
              <el-option
                v-for="item in dict.extra_bed_type"
                :key="item.dataValue"
                :label="item.dataName"
                :value="item.dataValue"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="Is it free?"
            :prop="`extraBedData.${index}.free`"
            verify
          >
            <el-select
              v-model="item.free"
              placeholder="Please select"
              style="width: 100%"
              clearable
            >
              <el-option
                v-for=Item in [{dataName: 'yes ', dataValue: 1}, {dataName:' no ', dataValue: 0},]"
                :key="item.dataValue"
                :label="item.dataName"
                :value="item.dataValue"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            v-if="item.free == 0"
            label="Extra bed price"
            :prop="`extraBedData.${index}.extraBedFee`"
            :verify="{ type: 'pint', lte: 999 }"
          >
            <el-input placeholder="Please enter the content" v-model="item.extraBedFee">
              <template slot="append">RMB /</template>
            </el-input>
          </el-form-item>
        </div>
      </div>
    </template>
</el-form>  
Copy the code

Note that the core of the multi-level loop validation is on the el-form-item :prop=”extraBedData.${index}.extraBedType“

ExtraBedData is the array name, index is the array loop index value, and extraBedType is the field that needs to be validated.

${array loop index value}; Fields to be validated in array objects”

Don’t panic when you encounter problems, think more, check information, or consult colleagues and friends, difficulties are not terrible.

By the way, if you’ve seen verify in my code, it’s an elemental-form-verify plugin developed by one of my colleagues. It’s called elemental-form-Verify. If you’re interested, you can use it. There’s no problem using the rules provided by Element-UI, such as the ones above

<el-form-item
    label="Is it free?"
    :prop="`extraBedData.${index}.free`"
    verify
>
</el-form-item>
Copy the code

We could write it like this

 <el-form-item
    label="Is it free?"
    :prop="`extraBedData.${index}.free`"
    :rules="{required: true, message: 'required ',}"
>
</el-form-item>
Copy the code

All right, so much for multi-level loop validation.

Note down the js of this page, of course, irrelevant to the question we are discussing, you can skip.

import { mapGetters } from "vuex";
export default {
  props: {
    form: {
      type: Object.required: true.default() {
        return{}; }},status: {
      type: String.required: true,}},computed: {
    ...mapGetters(["dict"]),},data() {
    return {};
  },
  watch: {
    // Allow extra beds If you select No, clear the information about extra beds and the number of extra beds
    "form.allowExtraBed": {
      handler(nv, ov) {
        if (nv == 0) {
          this.$set(this.form, "extraBedData"[]);this.$set(this.form, "extraBedNum".null);
        }
        if (nv == 1) {
          if(!this.form.extraBedData ||
            (this.form.extraBedData.constructor === Array &&
              this.form.extraBedData.length == 0)) {this.$set(this.form, "extraBedNum".1);
            this.onExtraBedNumChange(1); }}},immediate: true.deep: true,}},methods: {
    onExtraBedNumChange(nv) {
      let temp = [];
      for (let i = 0; i < nv; i++) {
        temp.push({
          extraBedType: null.free: null.extraBedFee: null}); }this.$set(this.form, "extraBedData", temp); ,}}};Copy the code