Dynamically Add or Remove Input Textbox Using VueJS

Posted by & filed under CSS, HTML5, JAVASCRIPT, JQUERY, Twitter Bootstrap, VueJS, VueJs 2.

VueJS Dynamically add/remove Input

In this tutorial we are going to see how to dynamically add or Remove input/textbox using VueJS. I have done same thing previously using jQuery in the following tutorial.

  1. Dynamically Add and Remove Textbox/Input Using jQuery

Step 1: Create index.html file and Add VueJS File:

Create new project/directory name dynamic-input-vue in your htdocs/www folder, and create index.html file in it. Then copy and paste following HMTL snippet in your index.html file.

Here I have just included VueJS library in the head of HTML file.


<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dynamically Add or Remove Input Using VueJS</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    
  </head>

   <body>
    
   </body>

</html>

Step 2: Create VueJS Application By Initializing VueJs:

Next add <div id=”app”> in the <body> of your html file.


<div id="app">
    <!-- VueJs app will mounted here-->
</div>

Next go ahead and initialize VueJs application by calling new keyword followed Vue(), then passing parameters as an object.


    var app = new Vue({ el: "#app"});

We are mounting the our vuejs application in <div id=”app”>, that’s specified during VueJS application initialization as el property.

Step 3: Add/Remove Input/textbox dynamically Using VueJS v-for directive:

Next add inputs array as data property of VueJS application with name property in it.


var app = new Vue({
    el: "#app",
    data: {
        inputs: [
            {
                name: ''
            }
        ]
    },
    methods: {

    }
});

Now add v-for directive to generate html template dynamically. Based inputs array, it manages the generated html. Here is the html snippet.


<div class="form-group" v-for="(input,k) in inputs" :key="k">
    <input type="text" class="form-control" v-model="input.name">
    <span>
        <i class="fas fa-minus-circle" @click="remove(k)" v-show="k || ( !k && inputs.length > 1)"></i>
        <i class="fas fa-plus-circle" @click="add(k)" v-show="k == inputs.length-1"></i>
    </span>
</div>

Next add remove() and add() methods respectively to add or remove input/textbox dynamically.


var app = new Vue({
    el: "#app",
    data: {
        inputs: [
            {
                name: ''
            }
        ]
    },
    methods: {
        add(index) {
            this.inputs.push({ name: '' });
        },
        remove(index) {
            this.inputs.splice(index, 1);
        }
    }
});

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni2explore[at]gmail.com

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Get Instant Script Download Access!