title: Submitting form in Vue.js with ajax with Vuetify and vee-validate
body: <p>Does anyone know how can I submit it to JSON after the form validation?</p>
  
  <p>Here is my code:</p>
  
  <p>Contact.vue</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-container grid-list-md fluid id="contact"&gt;
      &lt;v-container grid-list-md&gt;
        &lt;v-layout row wrap&gt;
          &lt;v-flex xs12&gt;
            &lt;h2 class="default-custom-title"&gt;contact&lt;/h2&gt;
            &lt;p class="text-description"&gt;
              Drop a message and we will be in contact soon.
            &lt;/p&gt;
          &lt;/v-flex&gt;
        &lt;/v-layout&gt;
        &lt;v-layout row wrap&gt;
          &lt;v-flex xs12&gt;
            &lt;form v-on:submit.prevent="onSubmit"&gt;
              &lt;v-layout row wrap&gt;
                &lt;v-flex xs12&gt;
                  &lt;v-text-field
                    id="name"
                    v-model="name"
                    label="Name"
                    alpha
                    :error-messages="errors.collect('name')"
                    v-validate="'required|alpha'"
                    data-vv-name="name"
                    required&gt;
                  &lt;/v-text-field&gt;
                &lt;/v-flex&gt;
              &lt;/v-layout&gt;
              &lt;v-layout row wrap&gt;
                &lt;v-flex xs12&gt;
                  &lt;v-text-field
                    id="phone"
                    v-model="phone"
                    label="Phone"
                    numeric
                    :error-messages="errors.collect('phone')"
                    v-validate="'required|numeric'"
                    data-vv-name="phone"
                    required&gt;
                  &lt;/v-text-field&gt;
                &lt;/v-flex&gt;
              &lt;/v-layout&gt;
              &lt;v-layout row wrap&gt;
                &lt;v-flex xs12&gt;
                  &lt;v-text-field
                    id="email"
                    v-model="email"
                    label="E-mail"
                    :error-messages="errors.collect('email')"
                    v-validate="'required|email'"
                    data-vv-name="email"
                    required
                  &gt;&lt;/v-text-field&gt;
                &lt;/v-flex&gt;
              &lt;/v-layout&gt;
              &lt;v-layout row wrap&gt;
                &lt;v-flex xs12&gt;
                  &lt;v-text-field
                    id="message"
                    v-model="message"
                    label="Message"
                    :counter="300"
                    :error-messages="errors.collect('message')"
                    v-validate="'required|max:300'"
                    data-vv-name="message"
                    required&gt;
                  &lt;/v-text-field&gt;
                &lt;/v-flex&gt;
              &lt;/v-layout&gt;
              &lt;v-layout row wrap text-xs-right&gt;
                &lt;v-flex xs12&gt;
                  &lt;v-btn @click="submit" secondary id="btn-submit"&gt;submit&lt;/v-btn&gt;
                  &lt;v-btn @click="clear" id="btn-clear"&gt;clear&lt;/v-btn&gt;
                &lt;/v-flex&gt;
              &lt;/v-layout&gt;
            &lt;/form&gt;
          &lt;/v-flex&gt;
        &lt;/v-layout&gt;
      &lt;/v-container&gt;
    &lt;/v-container&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
  
  export default {
    name: 'contact',
    data () {
      return {
        name: '',
        phone: '',
        email: '',
        message: ''
      }
    },
    methods: {
      submit () {
        this.$validator.validateAll()
      },
      clear () {
        this.name = ''
        this.phone = ''
        this.email = ''
        this.message = ''
        this.$validator.reset()
      }
    }
  }
  
  &lt;/script&gt;
  &lt;!-- Add "scoped" attribute to limit CSS to this component only --&gt;
  
  &lt;style&gt;
  
  #btn-submit,
  #btn-clear{
      margin: 1em 0 0 1em!important;
  }
  
  @media all and (max-width: 960px) { 
    .text-description {
      font-weight: 400;
      font-size: 1.3em;
    }
    .light-text {
        font-weight: 300;
        font-size: 1.2em;
    }
  }
  @media all and (max-width: 736px) { 
    .text-description {
      font-weight: 400;
      font-size: 1.3em;
    }
    .light-text {
        font-weight: 300;
        font-size: 1.2em;
    }
    .ecn-logo{
      width: 350px;
    }
  }
  @media all and (max-width: 480px) { 
    .ecn-logo{
      width: 300px;
    }
  }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>And here the main.js as well:</p>
  
  <pre><code>// The Vue build version to load with the `import` command
  // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
  import Vue from 'vue'
  import Vuetify from 'vuetify'
  import './stylus/main.styl'
  import App from './App'
  import router from './router'
  import VeeValidate from 'vee-validate'
  
  Vue.use(Vuetify)
  Vue.use(VeeValidate)
  Vue.config.productionTip = false
  
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    template: '&lt;App/&gt;',
    components: { App }
  })
  </code></pre>
  
  <p>I'm currently using the Vuetify form with vee-validate as you can see here:
  <a href="https://vuetifyjs.com/components/forms" rel="nofollow noreferrer">https://vuetifyjs.com/components/forms</a> and I don't want to use JQuery with Vue.</p>
  
  <p>For now, the validation is working but after click on "Submit" button nothing changes.</p>
  
  <p>Thank you!</p>