KaueDrey

Untitled

Apr 8th, 2020
703
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div id="app">
  2.   <div>
  3.     <form-wizard shape="square" color="#3498db">
  4.       <tab-content title="Personal details" icon="ti-user" :before-change="()=>validateStep('step1')">
  5.         <step1 ref="step1" @on-validate="mergePartialModels"></step1>
  6.       </tab-content>
  7.       <tab-content title="Additional Info" icon="ti-settings" :before-change="()=>validateStep('step2')">
  8.         <step2 ref="step2" @on-validate="mergePartialModels"></step2>
  9.       </tab-content>
  10.       <tab-content title="Last step" icon="ti-check">
  11.         Here is your final model:
  12.        <pre>{{finalModel}}</pre>
  13.       </tab-content>
  14.     </form-wizard>
  15.   </div>
  16. </div>
  17.  
  18.  
  19. Vue.use(window.vuelidate.default)
  20. const {
  21.   required,
  22.   minLength,
  23.   email
  24. } = window.validators
  25. Vue.use(VueFormWizard)
  26.  
  27. Vue.component('step1', {
  28.   template: `<div>
  29.           <div class="form-group" v-bind:class="{ 'has-error': $v.firstName.$error }">
  30.             <label >First name</label>
  31.             <input class="form-control" v-model.trim="firstName" @input="$v.firstName.$touch()">
  32.              <span class="help-block" v-if="$v.firstName.$error && !$v.firstName.required">First name is required</span>
  33.           </div>
  34.           <div class="form-group" v-bind:class="{ 'has-error': $v.lastName.$error }">
  35.             <label>Last name</label>
  36.             <input class="form-control" v-model.trim="lastName" @input="$v.lastName.$touch()">
  37.              <span class="help-block" v-if="$v.lastName.$error && !$v.lastName.required">Last name is required</span>
  38.           </div>
  39.          
  40.           <div class="form-group" v-bind:class="{ 'has-error': $v.email.$error }">
  41.             <label>Email</label>
  42.             <input class="form-control" v-model.trim="email" @input="$v.email.$touch()">
  43.             <span class="help-block" v-if="$v.email.$error && !$v.email.required">Email is required</span>
  44.             <span class="help-block" v-if="$v.email.$error && !$v.email.email">This is not a valid email!</span>
  45.           </div>
  46.         </div>`,
  47.   data() {
  48.     return {
  49.       firstName: '',
  50.       lastName: '',
  51.       email: ''
  52.     }
  53.   },
  54.   validations: {
  55.     firstName: {
  56.       required
  57.     },
  58.     lastName: {
  59.       required
  60.     },
  61.     email: {
  62.       required,
  63.       email
  64.     },
  65.     form: ['firstName', 'lastName', 'email']
  66.   },
  67.   methods: {
  68.     validate() {
  69.       this.$v.form.$touch();
  70.       var isValid = !this.$v.form.$invalid
  71.       this.$emit('on-validate', this.$data, isValid)
  72.       return isValid
  73.     }
  74.   }
  75. })
  76.  
  77. Vue.component('step2', {
  78.   template: `<div>
  79.           <div class="form-group" v-bind:class="{ 'has-error': $v.country.$error }">
  80.             <label >Country</label>
  81.             <select class="form-control" v-model.trim="country" @input="$v.country.$touch()">
  82.               <option>USA</option>
  83.                        <option>United Kingdom</option>
  84.                         <option>France</option>
  85.             </select>
  86.              <span class="help-block" v-if="$v.country.$error && !$v.country.required">Country is required</span>
  87.           </div>
  88.           <div class="form-group" v-bind:class="{ 'has-error': $v.city.$error }">
  89.             <label>City</label>
  90.             <input class="form-control" v-model.trim="city" @input="$v.city.$touch()">
  91.              <span class="help-block" v-if="$v.city.$error && !$v.city.required">City is required</span>
  92.           </div>
  93.         </div>`,
  94.   data() {
  95.     return {
  96.       country: '',
  97.       city: ''
  98.     }
  99.   },
  100.   validations: {
  101.     country: {
  102.       required
  103.     },
  104.     city: {
  105.       required
  106.     },
  107.     form: ['country', 'city']
  108.   },
  109.   methods: {
  110.     validate() {
  111.       this.$v.form.$touch();
  112.       var isValid = !this.$v.form.$invalid
  113.       this.$emit('on-validate', this.$data, isValid)
  114.       return isValid
  115.     }
  116.   }
  117. })
  118. new Vue({
  119.   el: '#app',
  120.   data: {
  121.     finalModel: {},
  122.   },
  123.   methods: {
  124.     validateStep(name) {
  125.       var refToValidate = this.$refs[name];
  126.       return refToValidate.validate();
  127.     },
  128.     mergePartialModels(model, isValid){
  129.       if(isValid){
  130.       // merging each step model into the final model
  131.        this.finalModel = Object.assign({},this.finalModel, model)
  132.       }
  133.     }
  134.   }
  135. })
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×