axiosのDeleteで引数を送る方法メモ

削除機能を実装していて、axiosでdeleteを呼び出すとなぜか引数が送れない問題が発生しました。調査してみて解決できたので忘れないようにメモ残します。

こちらの記事を参考にして解決できました。割とすぐに見つかって良かったです。ありがたいですね。

qiita.com

PostとPutで送る場合は以下のようにaxiosの第二引数に送りたいデータを渡せばOKだったのですが

newJoke() {
      axios.post("http://localhost:8080/addJoke", {
          joke: this.joke
        })

なぜかdeleteでは上記のようにデータを第二引数で渡してもAPIが引数を受け取れていませんでした。で、調べた記事を参考にして、自分の環境では以下のようにparamsプロパティを使った書き方でdeleteでも引数送れるようになりました。
※追記: Vue CLIではparamsではなくdataというオブジェクト名にすることで引数を送れました。

axios.delete("http://localhost:8080/deleteJoke",{ params:{id: this.id} })

axiosの仕様の細かいことはよくわかってませんが、ひとつ問題を解決できたので嬉しいです。 実際アプリを開発する時は物理削除より論理削除する方が多いかと思いますが、基礎としてCRUDは実装できる状態にしておきたかったので、目標がクリアできて良かったです。

フロントエンドが思うように動いてくるとさらにプログラミングが楽しくなってきました。