Detailed explanation of the loop form item example in Vue

Sometimes we may encounter such a requirement, that is, the user can add a similar form by clicking a button, and add it once per click. Then you need to use deep copy, Vue.js+ElementUI and so on. The effect is roughly as follows: a form has a drop-down box and two input boxes. Now click the "Add Form" button and another form will appear. Click "Submit Form" to submit the values of the two forms at the same time.

insert image description here

The code is as follows:

<template>
  <div>
    <div style="margin: 10px 0">
      <el-button type="primary" @click="addForm">Add form</el-button>
      <el-button type="primary" @click="submit">Submit the form</el-button>
    </div>
    <div v-for="(item, index) in List" :key="index">
      <el-form ref="form" label-width="80px">
        <el-form-item label="Live broadcast platform">
          <el-select
            v-model="item.platform"
            :key="index"
            placeholder="Please select the live streaming platform"
          >
            <el-option
              :label="item2.platformName"
              v-for="(item2, index2) in platformNameList"
              :key="index2"
              :value="item2.platformValue"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="Number of fans">
          <el-input v-model="item.fanMount" :key="index"></el-input>
        </el-form-item>

        <el-form-item label="Platform ID">
          <el-input v-model="item.platformId" :key="index"></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "Inspection Content Page",
      personObj: {
        platform: "",
        fanMount: "",
        platformId: "",
      },
      platformNameList: [
        {
          platformName: "Kuaishou",
          platformValue: "1",
        },
        {
          platformName: "TikTok",
          platformValue: "2",
        },
        {
          platformName: "Taobao",
          platformValue: "3",
        },
      ],
      List: [
        {
          platform: "",
          fanMount: "",
          platformId: "",
        },
      ],
    };
  },

  methods: {
  //deep copy cloneObj(obj) {
      let ret;
      if (Array.isArray(obj)) {
        //Create an empty array ret = [];
        for (let i = 0; i < obj.length; i++) {
          ret[i] = this.cloneObj(obj[i]);
        }
        return ret;
      } else if (Object.prototype.toString.call(obj) === "[object Object]") {
        ret = {};
        for (let i in obj) {
          ret[i] = this.cloneObj(obj[i]);
        }
        return ret;
      } else {
        return obj;
      }
    },
    //Add form addForm() {
      let arr = this.cloneObj(this.personObj);
      console.log("arr", arr);
      this.List.push(arr);
    },
    //Submit the form submit() {
      console.log("this.List", this.List);
    },
  },
};
</script>

Code Analysis:
A deep copy function is encapsulated here. Every time you click Add Form, a copy of the object we defined will be copied. Note that this object is composed of the value of our initial form. We use v-for to traverse the array List in the outermost layer and push an object into the array every time you click "Add Form". Finally, click the "Submit Form" button and print this.List to see the entire array object. Let's try it and choose to enter the following values:

insert image description here

The console prints the following results:

insert image description here

Now suppose there is a requirement to specify several forms to be added, instead of adding forms one by one. The effect is as follows. There are three buttons, and one form is displayed at the beginning.

insert image description here

When I click the "3" button, there are three forms in total on the interface, as shown below:

insert image description here

The code is as follows:

<template>
  <div>
    <div style="margin: 10px 0">
      <el-button type="primary" @click="add(3)">3</el-button>
      <el-button type="primary" @click="addForm">Add form</el-button>
      <el-button type="primary" @click="submit">Submit the form</el-button>
    </div>
    <div v-for="(item, index) in List" :key="index">
      <el-form ref="form" label-width="80px">
        <el-form-item label="Live broadcast platform">
          <el-select
            v-model="item.platform"
            :key="index"
            placeholder="Please select the live streaming platform"
          >
            <el-option
              :label="item2.platformName"
              v-for="(item2, index2) in platformNameList"
              :key="index2"
              :value="item2.platformValue"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="Number of fans">
          <el-input v-model="item.fanMount" :key="index"></el-input>
        </el-form-item>

        <el-form-item label="Platform ID">
          <el-input v-model="item.platformId" :key="index"></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "Inspection Content Page",
      personObj: {
        platform: "",
        fanMount: "",
        platformId: "",
      },
      platformNameList: [
        {
          platformName: "Kuaishou",
          platformValue: "1",
        },
        {
          platformName: "TikTok",
          platformValue: "2",
        },
        {
          platformName: "Taobao",
          platformValue: "3",
        },
      ],
      List: [
        {
          platform: "",

          fanMount: "",
          platformId: "",
        },
      ],
    };
  },

  methods: {
    cloneObj(obj) {
      let ret;
      if (Array.isArray(obj)) {
        //Create an empty array ret = [];
        for (let i = 0; i < obj.length; i++) {
          ret[i] = this.cloneObj(obj[i]);
        }
        return ret;
      } else if (Object.prototype.toString.call(obj) === "[object Object]") {
        ret = {};
        for (let i in obj) {
          ret[i] = this.cloneObj(obj[i]);
        }
        return ret;
      } else {
        return obj;
      }
    },
    add(a) {
      this.addForm(a);
    },
    addForm(a) {
      let arr = this.cloneObj(this.personObj);
      console.log("arr", arr);
      this.List.push(arr);
      a--;
      if (a > 0) {
        this.addForm(a - 1);
      }
    },
    submit() {
      console.log("this.list", this.List);
    },
  },
};
</script>

<style>
</style>

The code analysis is as follows:

When clicking the add method of the button, the total number of forms is passed in, and then in the addForm method of adding the form, self-decrement, judgment, and recursion are used to implement copying when clicking continuously. Then we try the effect

insert image description here

Print the console

insert image description here

This is the end of this article about the example of looping form items in Vue. For more relevant Vue loop form items content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: