preface

When the ElementUI component was used in the project, it was impossible for the official to have all the examples of the business in our project because of some business requirements. Therefore, here are some problems encountered in writing the project.

Form componentmodelThe data type of theObject

The problem background

There is a requirement to make a circular form where the bidirectional binding values of the form should be an array, and the value of the form property :model should be written as a :model=” class. Array “, if you assign an array to it directly, write model=” array “, as shown in the figure below

The correct sample

/ / data
formData: {
    id: 1.name: Hunan Normal University.gradeList: [{id: 1.name: 'First year'.classList: [{id: 1.name: '01 class'
          },
          {
            id: 2.name: '02 class'}]}]}Copy the code
<! FormData must be of type Object -->
  <el-form :model="formData" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <template v-for="(grade, index) in formData.gradeList">
      <el-form-item label="Class Name" :prop="'gradeList.' + index + '.name'"
        :rules="{required: true, message: 'Please enter the grade ',trigger: 'blur'}">
        <el-input v-model="grade.name"></el-input>
      </el-form-item>
    </template>
  </el-form>
Copy the code

Form validation in circular forms

Sometimes there is such a requirement: a school related information input form embedded with each grade information form (single-layer circular form), a grade there are multiple classes of information form (multi-layer nested form), this time to the inside of each input box to do form verification, how to do?

The prop property matches the prop property as follows:

/ / data
formData: {
    id: 1.name: Hunan Normal University.gradeList: [{id: 1.name: 'First year'.classList: [{id: 1.name: '01 class'
          },
          {
            id: 2.name: '02 class'}]}]}Copy the code

1. Single-layer circular forms

 <! - prop is written like this: prop = "+ index + 'gradeList.' 'name'" -- >
  <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <template v-for="(grade, index) in formData.gradeList">
      <el-form-item label="Grade name" :prop="'gradeList.' + index + '.name'"
        :rules="{required: true, message: 'Please enter the grade ',trigger: 'blur'}">
        <el-input v-model="grade.name"></el-input>
      </el-form-item>
    </template>
  </el-form>
Copy the code

2. Two-layer circular form

 <! Prop ="'gradeList.' + index + '.name'" -->
  <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <template v-for="(grade, index) in formData.gradeList">
      <el-form-item label="Grade name" :prop="'gradeList.' + index + '.name'"
        :rules="{required: true, message: 'Please enter the grade ',trigger: 'blur'}">
        <el-input v-model="grade.name"></el-input>
      </el-form-item>
      <template v-for="(class, classIndex) in grade.classList">
        <el-form-item label="Class Name" :prop="'gradeList.' + index + '.classList.' + classIndex + '.name'"
          :rules="{required: true, message: 'Please enter class ',trigger: 'blur'}">
          <el-input v-model="class.name"></el-input>
        </el-form-item>
      </template>
    </template>
  </el-form>
Copy the code

Similarly, a multilayer circular form can be written in the format of a prop property in a two-layer circular form.

If you encounter other problems or precautions in the component, please share them in the comments section.

To be continued…

Write in the last

My name is AndyHu and I am currently working as a front-end brick moving engineer.

If there are any mistakes in this article, please correct them in the comments section. If this article helps you, please like it and follow it

True freedom is letting your soul control your skin!!