daily pastebin goal
4%
SHARE
TWEET

Untitled

a guest May 31st, 2017 88 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.     <div>
  3.         <form @submit.prevent="formSubmit">
  4.             <vue-tabs>
  5.                 <v-tab title="Personal Info">
  6.                     <div class="form-group">    
  7.                         <label>Name</label>
  8.                         <input v-validate="'required'" name="name" type="text" v-model="client.name" class="form-control">
  9.                         <span v-show="errors.has('name')" class="bg-danger">{{ errors.first('name') }}</span>
  10.                     </div>
  11.                     <div class="form-group">
  12.                         <label>E-mail</label>
  13.                         <input name="email" v-validate="'email'" type="text" v-model="client.email" class="form-control">
  14.                         <span v-show="errors.has('email')" class="bg-danger">{{ errors.first('email') }}</span>
  15.                     </div>
  16.                 </v-tab>
  17.  
  18.                 <v-tab title="Address Info">
  19.                     <div class="form-group">
  20.                         <label>Address</label>
  21.                         <input type="text" v-model="client.address" class="form-control">
  22.                     </div>
  23.                 </v-tab>
  24.             </vue-tabs>
  25.             <button type="submit" class="btn btn-default">Save</button>
  26.             <button @click.prevent="cancel" class="btn btn-default">Cancel</button>
  27.         </form>
  28.     </div>
  29. </template>
  30. <script>
  31. //local registration
  32. import {VueTabs, VTab} from 'vue-nav-tabs'
  33. import 'vue-nav-tabs/dist/vue-tabs.min.css'
  34. //component code
  35.  
  36. export default {
  37.     props: ['client'],
  38.     data: function(){
  39.         return {
  40.             errorMessage: ''
  41.         }
  42.     },
  43.     components: {
  44.         VueTabs,
  45.         VTab
  46.     },
  47.     methods: {
  48.         formSubmit(){
  49.             this.$validator.validateAll()
  50.                 .then(()=>{
  51.                     console.log(this.errors);
  52.                     this.$emit("formSubmit", this.client);
  53.                 })
  54.                 .catch(()=>{});
  55.         },
  56.         cancel(){
  57.             this.$emit("formCancel");
  58.         }
  59.     }
  60. }
  61. </script>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top