index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | //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"> </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> |
