Vue에서 이벤트 수정자를 사용하여 .prevent를 리디렉션하지 않고 양식 제출

Question

내 응용 프로그램에서 Vue를 사용하고 있으며 양식을 제출하지만 리디렉션을 피하는 방법을 알고 싶습니다. 그것은 다음과 같은 방법으로 얻을 수있는 공식 뷰의 문서에 따르면 : 그것은 그렇다고 의미에서 작동

<form class="myForm" action="/page" method="post" @submit.prevent="onSubmit"> 
    <input name="email" type="email" placeholder="e-mail" v-model="email"> 
    <button @click="myFunction()"> 

페이지가 더 이상이다 : 여기

<!-- the submit event will no longer reload the page --> 
<form v-on:submit.prevent="onSubmit"></form> 

은 내 양식 내 일부 리다이렉션되었지만 onSubmit 메소드가 정의되지 않았다는 오류가 발생합니다. 그래서 내가 이해할 수없는 것은 어떻게 정의해야 하는가입니다. 반면에 나는 @submit@prevent이라고 쓸 수는 있지만, 그것이 완전히 이해되지 않는 한 제출을 방해하고 그것이 내가 찾고있는 것이 아닙니다. Ajax, Axios 및 그런 종류의 기술 없이는이를 수행 할 수있는 적절한 방법이 있습니까? 내가 원하는 것은 myFunction을 실행하고 제출 양식을 작성하는 것이지만 리다이렉션을 피하기를 원할 것입니다.

Answer 1

onSubmit은 vue 인스턴스의 methods 속성에있는 함수 여야합니다. 즉

methods: { 
    onSubmit() { 
    // DO Something 
    } 
} 

이 문서는 <form v-on:submit.prevent="onSubmit"></form>가 올바른 사용, 그런 말을한다. 내 응용 프로그램에서 이것을 사용합니다.

아래 예를 참조하십시오. 페이지를 새로 고치지 않고 단추를 클릭하면 메시지가 변경됩니다. 그것은 가치가 무엇인지에 대한

var vm = new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return { 
 
     test: 'BEFORE SUBMIT' 
 
    } 
 
    }, 
 
    methods: { 
 
    onSubmit() { 
 
     this.test = 'AFTER SUBMIT' 
 
    } 
 
    } 
 
});

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 
<div id="app"> 
 
    {{test}} 
 
    <form v-on:submit.prevent="onSubmit"> 
 
    <button>Submit!</button> 
 
    </form> 
 
</div>

Answer 2

시도해보십시오. @submit.prevent="myFunction()", button은 <input type="submit" value="Submit"/> 일 수 있습니다. submit 유형은 제출할 양식을 트리거하며, submit.prevent은 기본 제출 동작을 금지하고 원하는대로 myFunction을 실행합니다.

필수 입력 필드에 대해 양식 유효성 검사를 트리거하는 추가 이점이 있습니다!