vue-form example 2

vue-form with Bootstrap styles

by fergal_doyle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.js"></script>
<script src="https://rawgit.com/fergaldoyle/vue-form/master/dist/vue-form.min.js"></script>
<div id="app">
  <vue-form ref="form" :state="formstate" @submit.prevent="onSubmit">

    <validate auto-label class="form-block">
      <label>Name *</label>
      <input v-model="model.name" name="name" required />
    </validate>

    <validate auto-label class="form-block">
      <label>Email *</label>
      <input type="email" v-model="model.email" name="email" />
    </validate>

    <button type="submit">Submit</button>
    <button type="button" @click="resetState">Reset</button>

  </vue-form>
  
  <pre>{{model}}</pre>
  <pre>{{formstate}}</pre>

</div>

CSS

.form-block {
  display: block;
  margin-bottom: 1.2rem;
}

.form-block > label {
  display: block;
  margin-bottom: .2rem;
}

.vf-form-submitted .vf-invalid {
  color: red;
  border: 1px solid red;
}

JavaScript

Vue.use(VueForm);

new Vue({
  el: '#app',
  data: {
    formstate: {},
    model: {
      name: '',
      email: ''
    }
  },
  methods: {
    onSubmit: function() {
      console.log(this.formstate.$valid);
    },
   resetState: function () {
    this.model.name = '';
    this.model.email = '';
    //this.$nextTick(function () {
			this.$refs.form.reset(); 
    //});     
  }
  }
});