Vue.jsを利用したバリデーション時 エラーなしの場合に画面遷移したい

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
Laravel + Vue.jsを利用してお問い合わせページを作成しています。

サブミットボタンクリック時にVue.jsがLaravelのバリデーションAPIを呼び出しして、
エラーがない場合は、次の画面に遷移させたいです。

しかし、Vue.jsにて次の画面に遷移させる記述を行う必要があると思うのですが、記述方法が上手くいかず困っています。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

methods: {
        doSubmit: function (e) {
            let item = {};
            Object.entries(this.$data).map(function (data) {
                item[data[0]] = data[1];
            });
            let param = {data: item};
            let count_data = this.checkData();
            let that = this;
            axios({
                method: "post",
                url: "api/allvalidate/check",
                data: param
            })
                .then(function (res) {
                })
                .catch(function (e) {
                    that.$set(that, 'errors', e.response.data.errors);
                })
            e.preventDefault();
        },
}

{{ form_open({'id':'inputForm','method':'POST','url':'/confirm'}) }}
    <section class="Content">
        <div class="Form" id="app">
           
                <label for="f-submit">
                    <button id="f-submit" class="btn btn--cta" name="f-submit" @click="doSubmit" type="submit">送信</button>
                </label>
           
        </div>
    </section>
    {{ form_close() }}

試したこと

axiosの.thenに「return true」を記載しましたが、遷移してくれません。

methods: {
        doSubmit: function (e) {
            let item = {};
            Object.entries(this.$data).map(function (data) {
                item[data[0]] = data[1];
            });
            let param = {data: item};
            let count_data = this.checkData();
            let that = this;
            axios({
                method: "post",
                url: "api/allvalidate/check",
                data: param
            })
                .then(function (res) {
                    return true;
                })
                .catch(function (e) {
                    that.$set(that, 'errors', e.response.data.errors);
                })
            e.preventDefault();
        },
}

Answer 1

問題点が2点ありまして、

1点目は、開発者ツールを使うなどしてボタンを押さずにフォームを送信するとチェックをすり抜けることができてしまうところ。
ボタンクリックではなく<form>タグのsubmitイベントを起点にdoSubmitメソッドを実行する必要があります。

{{ form_open({'id':'inputForm','method':'POST','url':'/confirm','@submit':'doSubmit'}) }}
    <section class="Content">
        <div class="Form" id="app">

                <label for="f-submit">
                    <button id="f-submit" class="btn btn--cta" name="f-submit" type="submit">送信</button>
                </label>

        </div>
    </section>
{{ form_close() }}

2点目は、成功時にフォームを送信する処理が存在しないところ。
チェックが同期処理のみならpreventDefault()を実行するか否かでフォームの送信・非送信を切り替えられるのですが、非同期処理が入ってくるとpreventDefault()を必ず実行しなければならず、フォームを送信する処理を自分で書く必要があります。

axios({
    method: "post",
    url: "api/allvalidate/check",
    data: param
})
    .then(function (res) {
        // フォーム送信
        e.currentTarget.submit();
    })
    .catch(function (e) {
        that.$set(that, 'errors', e.response.data.errors);
    })
e.preventDefault();

Comments

[kaori_luna]

ありがとうございます。
ボタンクリックではなく<form>タグのsubmitイベントを起点にdoSubmitメソッドをいれると、submitをクリックする時、いつも次の画面に遷移されます。
```
{{ form_open({'id':'inputForm','method':'POST','url':'/private/confirm', '@submit':'doSubmit'}) }}
```
これも試しましたが、効果がありません。
```
<form @submit.prevent="doSubmit">
```

[yhg]

フォーム送信処理を消しても遷移しますか？
遷移しないならAPIのレスポンスコードの問題になります。

[kaori_luna]

ありがとうございます。フォーム送信処理を消して遷移しないようにできました。2点目は、成功時にフォームを送信する処理を入れましたけど、
```
e.currentTarget.submit();
```

遷移できません。

[kaori_luna]

ご回答ありがとうございます。
これを書くと解決できました。
```
that.$refs.form.submit();
```