vue-form example 2

vue-form with Bootstrap styles

by fergal_doyle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>
<script src="https://rawgit.com/fergaldoyle/vue-form/master/dist/vue-form.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
  <div id="app" class="container py-5">

<vue-form :state="formstate" @submit.prevent="onSubmit">

      <validate auto-label class="form-group required-field">
        <label>Name</label>
        <input type="text" name="name" class="form-control" required v-model.lazy="model.name">

        <field-messages name="name" show="$touched || $submitted" class="form-control-feedback">
          <div>Success!</div>
          <div slot="required">Name is a required field</div>
        </field-messages>
      </validate>
      
      <my-comp :state="formstate"></my-comp>
      
      <div class="py-2 text-center">
        <button class="btn btn-primary" type="submit">Submit</button>
      </div>
    </vue-form>

    <pre>{{formstate}}</pre>

  </div>

CSS

.required-field > label::after {
  content: '*';
  color: red;
  margin-left: 0.25rem;
}

Babel + JSX

Vue.use(VueForm);

new Vue({
  el: '#app',
  data: {
    formstate: {},
    model: {
      name: '',
      email: ''
    }
  },
  methods: {
    onSubmit () {
      console.log(this.formstate.$valid);
    }
  },
  components: {
  	myComp: {
    	template: `
      <div style="border: 1px solid #ccc; padding: 20px">
      	<p>my-comp component</p>
        <validate auto-label class="form-group required-field">
          <label>Email</label>
          <input type="email" name="email" class="form-control" required v-model.lazy="model.email">

          <field-messages auto-label name="email" show="$touched || $submitted" class="form-control-feedback">
            <div>Success!</div>
            <div slot="required">Email is a required field</div>
            <div slot="email">Email is invalid</div>
          </field-messages>
        </validate>
      </div>`,
      data () {
      	return {model: { email: '' }};
      }
    }
  }
});