やったこと
Railsのアプリの一部にVue.jsで作成したコンポーネントを組み込んでいます。今回は、フォームの一部（selectボックス）にVueのコンポーネントを入れ込みました。
selectのoptionはRailsのデータを利用して作成したので、その時のまとめです。
動作環境
今回の動作環境は下記のとおりです。
- Rails 5.2.4.2
- Vue.js 3.0.1
前提条件
あるお店のデータを新規作成するページshops/newにおいて、shopのカテゴリー（Category）を選択するセレクトボックスを設置しました。
この中の<option>の中身をVueで動的に生成しました。
（↑上記の内容だけであれば、Railsの機能で十分なのですが、今回はこのフォームの選択内容によって動的に画面を変化させたかったので、selectボックスそのものからVueで作成しています）
参考記事
作成にあたり、参考にした記事を掲載します。この記事の内容も、そこから多くを引用させていただきながら作成しています。
APIを作成する
Ajax で GET しようと思うと、API を作成して、そこにリクエストを投げて JSON を取得することになるそうです。なので、はじめに API を作成しました。
routes
Rails.application.routes.draw do
root to: "somepages#index"
resources :shops, only: %i(new)
namespace :api do
resources :shops, only: %i(new)
end
end
controller
controllers/api/shops/ディレクトリを作成し、その中に以下のようなファイルを作成します。
class Api::ShopsController < ApplicationController
def new
@categories = Category.all
render 'new', formats: 'json', handlers: 'jbuilder'
end
end
Ajax用のフォーマットの作成
Jbuilderの定義
Jbuilderを用いて、Ajaxに使うJsonのデータを作成しました。
json.array! @categories, :code, :name
上記のコードの内容は、こちらの記事をご参照ください。
- Railsのjbuilderの書き方と便利なイディオムやメソッド
拙著ですが、初心者の方はよろしければこちらもどうぞ＾＾
- [初心者向け]Railsのコンソールでjbuilderの中身を確認した話
中身の確認
http://localhost:3000/api/shops/new.jsonにアクセスすると、Jbuilderで生成したJsonデータの中身が確認できます。
# 下記はサンプルデータです。通常、真っ白いページに出てきます。
[{"code":100, "name":"カテゴリー1"},{"code":200, "name":"カテゴリー2"},{"code":300, "name":"カテゴリー3"}]
AjaxでGETする
Vue で Ajax 通信する際に便利なライブリーであるaxios(アクシオス) をインストールします。Vue.jsではaxiosを利用することが推奨されています。
$ yarn add axios
yarn以外でのインストール方法はこちらの公式ドキュメントをご覧ください。
ページがロードされたときにselectボックスの中身が表示されるようにしたいと思います。
Vueのライフサイクルフックのうちmountedを利用します。
<template>
<div>
<select name="shop[category_id]" id="shop_category_id">
<option v-for="cat in categories" :value="cat.code">{{ cat.name }}</option>
</select>
</div>
</template>
<script>
// axiosを読み込む
import axios from 'axios';
export default {
data() {
return {
//axiosで取得するデータを入れるため、空でOK
categories: []
}
},
//mountedでVueインスタンスのDOM作成完了直後に読み込む
mounted() {
axios.get('/api/shops/new.json').then(response => (this.categories = response.data))
// response.dataの中には、Jbuilderで生成したJsonデータが入っているので、
// それをcategoriesに代入。
}
}
</script>
以上で、フォームが生成できました。（見せられないのが残念）
今回、コンポーネントはこちらのやり方でViewに呼び出しています。
もし、コンポーネントが呼び出せない！という方がいたらこちらを参照ください。
- Rails, Vue.js で単一ファイルコンポーネントを使用したいときの設定ファイルの書き方
感想
まだ少しわからないところがありますが、まずはRailsとVueをつなぐことができてうれしいです。引き続きいろいろなパーツをVueで作れるようになりたいと思います＾＾