Vue Js Dynamic Forms

 progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

so first we have to create our index file with vue inergration

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<head>
<title>Vue Js Dynamic forms</title>
</head>
<body>
<div class="container" id="myapp">
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</html>

now we have to create our form layout. I’m using bootstrap 4 for layout styling.

<div class="card mb-3">
<div class="card-body">
<span class="float-right" style="cursor: pointer;">x</span>
<h4 class="card-title">Add Customer index </h4>
<div class="customer-form">
<input class="form-control mb-2" type="text" placeholder="Customer name">
<input class="form-control mb-2" type="" placeholder="Customer age">
<textarea class="form-control mb2"></textarea>
</div>
</div>
</div>

now our base form layout is ok. we have to create Vue instance to apply our module. create script.js file and create Vue instance with the following example. in this we create our customer array object width default emty customer.

var app = new Vue({
el: '#myapp',
data: {
message: 'Hello Vue!',
customers:[
{
name:'',
age: '',
description:''
}
]
}
})

then we are going to map our customer object with our form layout by using vue v-for directive.below code shows hot to do it

<div class="card mb-3" v-for="(customer,index) in customers">
<div class="card-body">
<span class="float-right" style="cursor: pointer;" @click="removeCustomer(index)">x</span>
<h4 class="card-title">Add Customer index - {{index}}</h4>
<div class="customer-form">
<input class="form-control mb-2" v-model="customer.name" type="text" placeholder="Customer name">
<input class="form-control mb-2" type="" v-model="customer.age" placeholder="Customer age">
<textarea class="form-control mb2" v-model="customer.description"></textarea>
</div>
</div>
</div>

now we have to clone our customer form by using vue methods addNewCustomer.

var app = new Vue({
el: '#myapp',
data: {
message: 'Hello Vue!',
customers:[
{
name:'',
age: '',
description:''
}
]
},
methods: {
addnewCustomer() {
this.customers.push({
name:'',
age: '',
description:''
})
}
}
})

by pushing newly created customer to the Customers array it will automatically crate new form layout according to the data object.now we have to create remove form by usning method removeCustomer

var app = new Vue({
el: '#myapp',
data: {
message: 'Hello Vue!',
customers:[
{
name:'',
age: '',
description:''
}
]
},
methods: {
addnewCustomer() {
this.customers.push({
name:'',
age: '',
description:''
})
},
removeCustomer(index) {
this.customers.splice(index,1);
}
}
})

0 0 vote
Article Rating

by kushan


Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
salind
salind
2 years ago

can we use data inside the form with generate