Skip to content

Instantly share code, notes, and snippets.

@rahman541

rahman541/dynamic-form.html

Created July 31, 2018 06:45
Show Gist options
  • Save rahman541/21f9318a5f45ddaadadbea315e912008 to your computer and use it in GitHub Desktop.
Save rahman541/21f9318a5f45ddaadadbea315e912008 to your computer and use it in GitHub Desktop.
Download ZIP
Dynamic form using Vue Js & Bootstrap 4
Raw
dynamic-form.html
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Form With Vue Js</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container">
<button class="btn btn-success mt-5 mb-5"
@click="addNewEmployeeForm">New Employee</button>
<div class="card mb-3" v-for="(employee, index) in employees">
<div class="card-body">
<span @click="deleteEmployeeForm" class="float-right" style="cursor: pointer;">X</span>
<h4 class="card-title">Add employee (index: {{ index }})</h4>
<div class="employee-form">
<input type="text" placeholder="Name" class="form-control mb-2" v-model="employee.name">
<input type="text" placeholder="Job" class="form-control mb-2" v-model="employee.job">
<textarea cols="30" rows="10" placeholder="About" class="form-control" v-model="employee.about"></textarea>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var app = new Vue({
el: '.container',
data: {
employees: [
{
name: '',
job: '',
about: '',
}
]
},
methods: {
addNewEmployeeForm() {
this.employees.push({
name: '',
job: '',
about: '',
})
},
deleteEmployeeForm(index) {
this.employees.splice(index, 1)
}
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment