Dynamically Add or Remove Input Textbox Using VueJS
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.
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
