実現したいこと
Vue 3のaxiosでPOSTリクエストを送信するとページがリロードされないようにしたい。
ボタンを押下して↑の処理を実行しリロードされないようにしたい。
発生している問題・分からないこと
Vue 3のaxiosを使用してAPIにPOSTリクエストを送信する際に、ページがリロードされてしまう現象が発生しています。
API側は正常に動作しており、問題はブラウザの挙動に起因する可能性があり。
■動作環境
・HTML+CSS
・Vue 3
・自作のPython API(正常に動作)
使用しているCDN
該当のソースコード
html
1<div @click="buttonEvent">ボタン</div>
Vue3
1async buttonEvent() { 2 try { 3 const response = await axios.post( 4 "http://127.0.0.1:5001/post", 5 { 6 id: this.id 7 } 8 ); 9 console.log(response); 10 } catch (error) { 11 console.error(error); 12 } 13 },
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
Vue 3のaxiosを使用したAPI POST通信でページが更新されない方法について、AIに質問しましたが解決できませんでした。
ボタンは削除せず、POST通信の処理を取り除いたり別の処理を入れたら更新されなくなりました。
POST通信が更新の要因だったりしますでしょうか?
・@submit.prevent を使用してフォームのデフォルト動作をキャンセルし、JavaScriptで非同期のPOSTリクエストを送信。
・axiosの設定でGETリクエストを禁止する試み。
・redirect: "manual" オプションを使用してPOSTリクエストのリダイレクトを停止する試みも行った。
・ボタンをdivタグにした。
・ボタンをbuttonタグに変更し、「type="button"」にした。
以上が試した対応策と、解決できない問題に関する情報です。
追加のアドバイスやアイデアがあればお願いします。
補足
特になし
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー