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>
<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>
      <browse required name="file" v-model="model.file"></browse>
      <field-messages name="file">
        <div class="ok">Success!</div>
        <div class="error" slot="required">You must select a file!</div>
      </field-messages>
    </validate>


  </vue-form>

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

</div>

CSS

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

.ok {
  color: green;
}

.error {
  color: red;
}

JavaScript

Vue.use(VueForm);

var browse = {
  template: '<label class="browse-file"><input type="file"@change="processFile($event)" /></label>',
  props: {
    value: null,
  },
  methods: {
    processFile(e) {
      var reader = new FileReader();
      var file = e.target.files[0];
      if (!file) {
      	this.$emit('input', null);
        return
      }
      reader.addEventListener('load', () => {
        this.$emit('input', { file: file, result: reader.result });
      }, false);
      reader.readAsArrayBuffer(file);
    }
  }
}

new Vue({
  el: '#app',
  components: {
    browse: browse
  },
  data: {
    formstate: {},
    model: {
      file: null
    }
  }
});