Vuetify 및 vee-validate를 사용하여 Vue.js의 양식을 Auax에 제출

Question

양식 검증 후 어떻게 JSON에 제출할 수 있습니까?

Contact.vue 여기뿐만 아니라 main.js

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

: 그리고 여기

내 코드입니다

// 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-와 Vuetify 양식을 사용하고 있습니다 여기에서 볼 수 있듯이 유효성을 확인하십시오 : https://vuetifyjs.com/components/forms 및 Vue와 함께 JQuery를 사용하고 싶지 않습니다.

지금은 유효성 검사가 작동하지만 '제출'버튼을 클릭 한 후에는 아무 것도 변경되지 않습니다.

감사합니다. 양식 유효성 검사 후

Answer 1

만들기 아약스 전화 : 당신은` "변경 아무것도"`의미하지 않는다 무엇

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