Take a look at element’s demo renderings first



Let’s go to the demo and get rid of all the extra code

1. V-bind details of prop




And then let’s take a closer look at the dynamic



When I first saw this notation I instinctively modified it

  :prop="domains[index].value"Copy the code

This also caused my console to throw an error, domains are not defined because the demo source code is an object with an array of forms nested in it

Property or method "domains" is not definedCopy the code

Xx (xx is the variable name of the input V-model binding)

Using es6 template strings for readability, this is now the same as element’s demo

:prop="`domains[${index}].value`"Copy the code


2. About el-form :model=” object”

When I first ran the demo from CV, everything was fine, but there was one difference. My form array in data was just a [] instead of a {}. The scenario was as follows:

 <el-form :model="domains" ref="domains" label-width="100px" class="demo-dynamic">Copy the code



The console throws another exception

Invalid prop: type check failed for prop "model". Expected Object, got Array Copy the code

This is a straightforward indication that he needs an Object, not an Array.

But our data is an array, after thinking, since data can not operate, we will do a little in the HTML

 <el-form :model="{domains}" ref="domains" label-width="100px" class="demo-dynamic">Copy the code

Here I successfully solve the problem of {demains} enclosing :model= “demains” with objects: the model needs objects

3. Demo shows the addition and deletion of a single form

Input {name: “, value:”,… }

I came up with two solutions, namely traversing the el-form and enclosing two from-itme traversals with an additional div tag

Here I chose the second option. (The first option also works, but it’s a little odd because when the form is submitted it requires iterating through every ref to call validate() and using promise.all to verify that the form is correct.)



This perfectly solves the problem of manipulating multiple input additions and deletions.


4. Small optimization of rules

Element’s dynamic add/subtract form contains rules in HTML. If you want to add rules to data dynamically, you need to clone the rules in each iteration using the extension string {… } or JSON

Here’s how it’s written in data:

Originally written in HTML:

:rules="{required: true, message: 'Names cannot be empty ', trigger: 'blur'}"Copy the code

The optimized writing method:

  :rules="{ ...myRules.value }"Copy the code

So each iteration will clone a new object, if not deep clone but all assign the same, it will cause a wrong all wrong serious consequences


Pasted below through a series of operations to dynamically add or subtract form source:

HTML part:

    <div class="demo">      <el-form :model="{domains}" ref="domains" label-width="100px" class="demo-dynamic">        <div v-for="(domain,index) in domains" :key="index">          <! - domain name - >          <el-form-item            :label='domain name' + index '            :rules="{ ...myRules.value }"            :prop="`domains[${index}].value`"          >            <el-input v-model="domain.value"></el-input>            <el-button @click.prevent="removeDomain(domain)">delete</el-button>          </el-form-item>          <! -- name -- -- >          <el-form-item            :label="' name '+ index"            :prop="`domains[${index}].name`"               :rules="{ ...myRules.name }"          >            <el-input v-model="domain.name"></el-input>          </el-form-item>        </div>        <el-form-item>          <el-button @click="addDomain">new</el-button>        </el-form-item>      </el-form>    </div>Copy the code

Js:

export default {  data() {    return {      domains: [{value: "".name: ""}].myRules: {        value: {          required: true.message: "Domain name cannot be empty".trigger: "blur"        },        name: {          required: true.message: "Name cannot be empty.".trigger: "blur"}}}; },methods: {    removeDomain(item) {      var index = this.domains.indexOf(item);      console.log("index: ", index);      if(index ! = =- 1) {        this.domains.splice(index, 1);      }    },    addDomain() {      this.domains.push({        value: "".name: ""        // key: Date.now() }); }}};Copy the code

Author: Chen Xiaocong (ME)

Blog: Nuggets

Email address: [email protected]

If this article is helpful to you, please give a thumbs-up to encourage the author ~~Copy the code