Detailed explanation of the loop form item example in Vue

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:
  • How to use v-for loop to generate dynamic tags in Vue.js
  • 7 Ways to Write a Vue v-for Loop
  • Attributes in vue v-for loop object
  • Implementing circular scrolling list function based on Vue
  • An example of implementing a simple infinite loop scrolling animation in Vue
  • This article will show you the event loop mechanism of vue.js

<<:  Solve the problem that Alibaba Cloud SSH remote connection will be disconnected after a short time

>>:  About MYSQL, you need to know the data types and operation tables

Recommend

How to use firewall iptables strategy to forward ports on Linux servers

Forwarding between two different servers Enable p...

Ideas and methods for incremental backup of MySQL database

To perform incremental backup of the MySQL databa...

How to configure anti-hotlinking for nginx website service (recommended)

1. Principle of Hotlinking 1.1 Web page preparati...

MySQL database table partitioning considerations [recommended]

Table partitioning is different from database par...

5 ways to migrate Docker containers to other servers

Migration is unavoidable in many cases. Hardware ...

7 interview questions about JS this, how many can you answer correctly

Preface In JavaScript, this is the function calli...

Teach you how to build a react+antd project from scratch

The previous articles were all my own learning lo...

Detailed tutorial for installing winx64 under mysql8.0.18 (with pictures and text)

Go to https://dev.mysql.com/downloads/mysql/ to d...

How to implement a password strength detector in react

Table of contents Preface use Component Writing D...

JavaScript implementation of drop-down list

This article example shares the specific code of ...

Detailed explanation of Linux inotify real-time backup implementation method

Real-time replication is the most important way t...

Web Design Experience

<br />The author used to be a novice in web ...

How to add color mask to background image in CSS3

Some time ago, during development, I encountered ...

Perfect solution to the problem of webpack packaging css background image path

Inside the style tag of the vue component, there ...

Detailed explanation of Vue router routing

Table of contents 1. Basic use 2. Several points ...