index.html
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue.Js Multi Step Form</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div class="container">
<h1 class="page-header text-center">Vue.Js Multi Step Form</h1>
<div id="app">
<template id="user_detail1" v-if="activePhase == 1">
<h1>Step 1</h1>
<div class="form-group col">
<label>Name</label><input name="name" v-model="user_detail1.name" placeholder="name" class="form-control">
</div>
<div class="form-group col">
<label>Email</label><input name="email" v-model="user_detail1.email" placeholder="email" class="form-control">
</div>
<button type="button" @click.prevent="goToStep(2)" class="btn btn-primary">Continue</button>
</template>
<template id="user_detail2" v-if="activePhase == 2">
<h1>Step 2</h1>
<div class="form-group col">
<label>City</label><input name="city" v-model="user_detail2.city" placeholder="city" class="form-control">
</div>
<div class="form-group col">
<label>State</label><input name="state" v-model="user_detail2.state" placeholder="state" class="form-control">
</div>
<button type="button" @click.prevent="goToStep(3)" class="btn btn-primary">Finish</button>
</template>
<template id="step3" v-if="activePhase == 3">
<strong>Name:</strong> {{ user_detail1.name }}<br />
<strong>Email:</strong> {{ user_detail1.email }}<br />
<strong>City:</strong> {{ user_detail2.city }}<br />
<strong>State:</strong> {{ user_detail2.state }}
</template>
</div>
</div>
<script>
Vue.component('user_detail1', {
template: '#user_detail1',
props: [
'activePhase',
'user_detail1'
]
});
Vue.component('user_detail2', {
template: '#user_detail2',
props: [
'activePhase',
'user_detail2'
]
});
Vue.component('step3', {
template: '#step3',
props: [
'activePhase',
'user_detail1',
'user_detail2'
]
});
var app = new Vue({
el: '#app',
data: {
activePhase: 1,
user_detail1: {
name: '',
email: ''
},
user_detail2: {
city: '',
state: ''
}
},
ready: function() {
console.log('ready');
},
methods: {
goToStep: function(step) {
this.activePhase = step;
}
}
});
</script>
</body>
</html>
