rails6 vue.jsでaxiosを利用する

rails6 vue.jsでaxiosを利用する

rails6で、vue.jsでaxiosを利用するまでの手順を記述してます。railsのバージョンは6.1.0です。

環境

  • OS ubuntu20.10
  • ruby 2.7.2
  • rails 6.1.0
  • Postgresql 13.1 (dockerで構築)

vue.js環境構築

以下のコマンドを実行すれば、vue.jsを利用するにあたり必要なファイルを用意してくれます。

適当なviewに以下を追加して、

「Hello Vue!!」と表示されていれば、環境構築は完了です。

Foreman導入

Webpackerを毎回ビルドしてくれるので、導入しておくと便利です。

axiosを利用

axiosを利用するのでインストールしておきます。

api接続

「app/javascript/packs」にある「app.vue」を以下のように編集して、axiosを使用して、APIで取得したデータを表示させます。

ブラウザに以下のページが表示され、APIから取得したデータが表示されます。

api用のvue.jsファイル作成

作成する前に、動作を確認するため「app/javascript/packs」にある「hello_vue.js」を編集して、「Can you say hello?」表示させてみます。

対象のviewに以下を追加します。

これで、「Cna you say hello」が表示されるようになります。

同じように「hello_vue.js」と同じ階層「api_vue.js」を以下のコードで作成します。

あとは、view側にid名「axios」の要素を追加して、表示させます。

これで、同じようにAPIを取得して表示することが可能です。

また「api_vue.js」をvuecliの「main.js」のようにコードを記述して、

view側を以下のように記述するして、同様の結果は得られます。