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

HTML sample code for implementing tab switching

Tab switching is also a common technology in proj...

How to use http and WebSocket in CocosCreator

Table of contents 1. HttpGET 2. HTTP POST WebSock...

Docker Consul Overview and Cluster Environment Construction Steps (Graphical Explanation)

Table of contents 1. Overview of Docker consul 2....

Unity connects to MySQL and reads table data implementation code

The table is as follows: Code when Unity reads an...

How to use ECharts in WeChat Mini Programs using uniapp

Today, we use uniapp to integrate Echarts to disp...

Shtml Concise Tutorial

Shtml and asp are similar. In files named shtml, s...

How to use environment variables in nginx configuration file

Preface Nginx is an HTTP server designed for perf...

Briefly describe the MySQL InnoDB storage engine

Preface: The storage engine is the core of the da...

Sample code for easily implementing page layout using flex layout

Without further ado, let's get straight to th...

Share 20 excellent web form design cases

Sophie Hardach Clyde Quay Wharf 37 East Soapbox Rx...

Native js implements custom scroll bar component

This article example shares the specific code of ...

How to allow external network access to mysql and modify mysql account password

The root account of mysql, I usually use localhos...

CSS Paint API: A CSS-like Drawing Board

1. Use Canvas images as CSS background images The...

Detailed example of mysql similar to oracle rownum writing

Rownum is a unique way of writing in Oracle. In O...

Steps to transplant the new kernel to the Linux system

1. Download the ubuntu16.04 image and the corresp...