vue-form example 2

vue-form with Bootstrap styles

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://unpkg.com/[email protected]/dist/vue-select.js"></script>
<script src="https://unpkg.com/vue@latest"></script>
<script src="https://unpkg.com/vue-select@latest"></script>
<script src="https://rawgit.com/fergaldoyle/vue-form/master/dist/vue-form.min.js"></script>
<div id="app" class="container py-5">

  <vue-form :state="formstate" v-model="formstate" @submit.prevent="onSubmit">
    <validate class="form-group required-field">
      <label>Select</label>
      <v-select name="select" required v-model="model.select" :options="['foo','bar']" multiple></v-select>
      <field-messages auto-label name="select" class="form-control-feedback">
        <div>Success!</div>
        <div slot="required">This is a required field</div>
      </field-messages>
    </validate>

    <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;
}

JavaScript

Vue.use(VueForm);

console.log(VueSelect);

new Vue({
  el: '#app',
  data: {
    formstate: {},
    model: {
      select: ''
    }
  },
  components: {
    'v-select': VueSelect.VueSelect
  },
  methods: {
    onSubmit: function() {
      console.log(this.formstate.$valid);
    }
  }
});