非同期通信を勘違いしていた問題

目次

1.投稿ボタンを押しても無反応...
2.非同期通信という根本的なことを忘れていた

Laravel + Vue.js を使ったブログ開発にて。
ブログ投稿の際に、 Vue からコントローラへ投稿内容のデータを送る axios 通信でちょっとしたミスがあったのでアウトプットとして記事にしてみます。

1. 投稿ボタンを押しても無反応...

最終的に実装させたかったのは、
投稿ボタンで発火させ、
Vue -> コントローラ -> DBに投稿データを保存し、投稿完了したらトップページへ自動遷移させる。
という流れだったのですが

Create.Component.vue

<script>

axios
    .post("/posts", data)
    .then((res) => {
        console.log(res);
        this.posts = res.data.posts;
    })
    .catch((err) => {
        console.log(err);
        console.log(err.response.data);
    });

このように書いた結果、投稿ボタンを押しても画面はそのまま無反応でした。
結果から言うと、
この処理では、投稿ボタンを押しても画面は何も変化しないのですが、投稿データ自体はコントローラに送られDBに保存されているため、変化がないからと投稿ボタンを何回も押しているとその分だけ同じ処理が走り同じ投稿がいくつもされてしまいます。

2. 非同期通信という根本的なことを忘れていた

コントローラには、投稿完了と共にトップページへ自動遷移する処理を書いていましたが、axiosは非同期通信なので画面は遷移しません。
そのため、Vue 側にトップページ自動遷移処理を書く必要がありました。
というわけで修正後がこちら！！

Create.Component.vue

<script>

axios
    .post("/posts", data)
    .then((res) => {
        console.log(res);
        this.posts = res.data.posts;
        window.location = "/";
    })
    .catch((err) => {
        console.log(err);
        console.log(err.response.data);
    });

window.location = "/"; を追加しました！
これで投稿完了とともにトップページへ画面が自動遷移してくれました。

非同期通信という根本的な部分を忘れていたおっちょこちょいミスでした...。