ActiveRecordに保存したデータをVueコンポーネントで表示させたい

ActiveModelにあるデータを.vueに呼び出すためにはどうすればいいんだ。

やり方があるみたいなので、学習していく。

Railsにあるデータをjsonに直す

下記のように、usersテーブルが存在している。

【usersテーブル】

id nickname email

1 subaru subaru@example.com

2 gon fleaks@example.com

3 kirua zordik@example.com

4 kurapika hinome@example.com

これを、コントローラー上で一旦jsonに戻す。

users_controller.rb

module Api
  class UsersController < ApplicationController
    def index
      users =  User.all
      render json: users
    end
  end
end

不要なカラムがある場合、または特定のカラムだけに絞る場合、以下のようにして省くことができる。

# **id, emailを省く** User.all.to_json**(except: [:id, :email]) 
# id, emailのみ取り出す** User.all.to_json**(only: [:id, :email])**

モデルをvueに表示させる

Json化させた値をerbファイルのscriptタグの中で定義する。

<template>
        <tr>
          <th>ID</th>
          <th>nickname</th>
          <th>email</th>
        </tr>
        <tr v-for="e in users" :key="e.id">
          <td>{{ e.id }}</td>
          <td>{{ e.nickname }}</td>
          <td>{{ e.email }}</td>
        </tr>
      </tbody>
</template>
 
 
<script>
import axios from '../plugins/axios'
export default {
data() {
    return {
      users: [],
},
mounted () {
    axios
      .get('/users')
      .then(response => (this.users = response.data))
  },
</script>

解説

v-for

条件分岐のvue版

下記のように、v-bind(:で省略している）でidを設定し、複数回表示させたい項目をv-forで囲むと、ループ処理をしてくれる。

#v-for "変数 in モデル名複数形" v-bind:key="変数.id"
v-for="e in users" :key="e.id"

axios

ブラウザや node.js で動く Promise ベースの HTTP クライアントである｡ REST-API を実行したいときなど､これを使うと実装が簡単にできる

(https://qiita.com/ksh-fthr/items/2daaaf3a15c4c11956e9)

今回は、baseURLをapiで設定しているので、わざわざ/usersの前にapiをつける必要がない。

plugin/axios.js
import axios from 'axios';

let csrf_token = document.getElementsByName('csrf-token')[0].content;
const axiosInstance = axios.create({
  baseURL: 'api',
  headers: { 'X-CSRF-TOKEN': csrf_token },
});

export default axiosInstance;

get通信を行い、/usersにあるjson達を取得してdata()にある空配列を持つusersにresponseを返している。こうすることで、usersを.vue上で使うことができる。

  axios
      .get('/users')
      .then(response => (this.users = response.data))

mounted

DOMが作成された直後の状態

ブラウザからページにアクセスした際に自動で処理させたいことを記述する場所と解釈することができる。つまり、今回は、axiosを使い「URLが/api/usersのブラウザにアクセスした際に、自動でusersのデータを取ってくる」という作業を行なっていることが読み取れる。

vue.jsのcreatedとmountedの違いを目で見て理解 | アールエフェクト

実際にとってきたデータ

Ruby on Rails, Vue.js で始めるモダン WEB アプリケーション入門 - Qiita

【Rails/vue.js】モデルデータをJavaScriptで取得してIDで検索できるようにする方法 | サシミスタジオ