elementUIを使いたくてvue.jsで開発していたが、アプリ制作が面白くなってきたぞということで初ajaxをしてみたくなった。
vue.jsではaxiosを使用することが推奨されているとのことで、axiosで非同期通信をしてみようと思った。
作業の中でうまく送信できなかったところがあったので、ハマったポイントを自分の備忘録として残しておく。
結論としては、json形式のデータの扱いになれていなかったことからハマってしまった。
<divclass="js-favorite-switch"@click="isFavorite">...</div>をクリックすると以下のメソッドがおこなわれるものとする。
newVue({el:"#app",methods:{isFavorite(){constfavoriteSwitch=document.querySelector('.js-favorite-switch .el-switch');console.log(favoriteSwitch);constisActive=favoriteSwitch.className;console.log(isActive);if(isActive==="el-switch is-checked"){axios.post('hoge.php',{test:'テストてすと',}).then(response=>{console.log(response);}).catch(error=>{console.log(error);});console.log('チェック入ってます');}elseif(isActive==="el-switch"){console.log('チェック入ってません');}}},});「ボタン」がactiveか否かで挙動を変えようというわけで、activeの際にaxiosを用いることとしている。
ちなみに、送信先のhoge.phpには以下を付記しておいた。
$request_body=file_get_contents('php://input');$data=json_decode($request_body,true);var_dump($request_body);//json形式var_dump($data['test']);//連想配列これでデバックもOK。
この状態で、activeにしてみると...
開発ツールのコンソール画面のconsole.log(response);の結果をみてみると、configという配列のなかのdataという配列の中に{"test":"テストてすと"}が含まれていることを確認。
json形式のデータの扱いになれていなかったもので、post送信できているのか確認が取れなかったが、以上のようにすることで確認が取れた。