イベント修飾子を.vreで使用してリダイレクトせずにフォームを送信する

Question

私は自分のアプリケーションでVueを使用していますが、フォームを送信する方法を知りたいが、リダイレクトは避けてください。 公式Vueのドキュメントによると、それは次のように達成することができます：ここで

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

は私のフォームの私の一部です：

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

それはみかんページはなくなったという意味で動作しませんリダイレクトされましたが、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を実行します。

これには、必要な入力フィールドのフォーム検証をトリガーするという追加の利点があります。