使用 Vuetify 和 vee-validate 在 Vue.js 中使用 ajax 提交表单

Question

有谁知道如何在表单验证后将其提交给 JSON？

这是我的代码：

Contact.vue

<template>
  <v-container grid-list-md fluid id="contact">
    <v-container grid-list-md>
      <v-layout row wrap>
        <v-flex xs12>
          <h2 class="default-custom-title">contact</h2>
          <p class="text-description">
            Drop a message and we will be in contact soon.
          </p>
        </v-flex>
      </v-layout>
      <v-layout row wrap>
        <v-flex xs12>
          <form v-on:submit.prevent="onSubmit">
            <v-layout row wrap>
              <v-flex xs12>
                <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>
                </v-text-field>
              </v-flex>
            </v-layout>
            <v-layout row wrap>
              <v-flex xs12>
                <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>
                </v-text-field>
              </v-flex>
            </v-layout>
            <v-layout row wrap>
              <v-flex xs12>
                <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
                ></v-text-field>
              </v-flex>
            </v-layout>
            <v-layout row wrap>
              <v-flex xs12>
                <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>
                </v-text-field>
              </v-flex>
            </v-layout>
            <v-layout row wrap text-xs-right>
              <v-flex xs12>
                <v-btn @click="submit" secondary id="btn-submit">submit</v-btn>
                <v-btn @click="clear" id="btn-clear">clear</v-btn>
              </v-flex>
            </v-layout>
          </form>
        </v-flex>
      </v-layout>
    </v-container>
  </v-container>
</template>


<script>

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()
    }
  }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>

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

</style>

这里还有 main.js：

// 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: '<App/>',
  components: { App }
})

我目前正在使用带有 vee-validate 的 Vuetify 表单，您可以在此处看到： https://vuetifyjs.com/components/forms 并且我不想在 Vue 中使用 JQuery。

现在，验证工作正常，但点击 "Submit" 按钮后没有任何变化。

谢谢！

Answer 1

在表单验证后进行 ajax 调用：

this.$validator.validateAll().then(isValid => {
    if (isValid) {
        /* ajax call if valid */
    }
    else{
        /* something else if not valid */
    }
});

使用 Vuetify 和 vee-validate 在 Vue.js 中使用 ajax 提交表单

Submitting form in Vue.js with ajax with Vuetify and vee-validate

forms

json

vuejs2

vuetify.js

vee-validate