apiをvueで表示させる - haayaaa’s diary

昨日書きかけだったapiをvueを使って表示させる部分の流れについて書いておこうと思います！

(クリックしたコメントをapiをたたいて取得してvueで表示させるだけのものです)

foremanを導入

webpackerとrailsの起動を簡単にできるようにしてくれるforemanというツールを導入してみます。

gem ‘foreman’とGemfileに追記し、bundle installを行います。

/Procfileを作成し、以下のように書きます。

web: bundle exec rails server -p $PORT

webpack: ./bin/webpack-dev-server

bundle exec foreman startとコマンドを実行すると、webpackerとrailsがいっぺんに立ち上がってくれます。

localhost:5000で立ち上げたサーバーへアクセスできます。

各ファイル編集

app/controllers/comments_controller.rb

class CommentsController < ApplicationController
 def index
  @comments = Comment.all
 end
end

app/controllers/api/v1/comments_controller.rb

class Api::V1::CommentsController < ApplicationController
  before_action :set_comment, only: [:show]

  def show
    render 'show', formats: 'json', handlers: 'jbuilder'
  end

  private
  def set_comment
    @comment = Comment.find(params[:id])
  end
end

app/views/api/v1/comments/show.json.jbuilder

json.body @comment.body

app/javascripts/packs/comments/index.js

import Vue from 'vue/dist/vue.esm';
import axios from 'axios';

new Vue ({
  el: '.js-commentsIndex',
  data: {
    commentInfo: {},
    commentInfoBool: false
  },
  methods: {
    commentShow(id){
      axios.get(`api/v1/comments/${id}.json`)
        .then(res => {
          this.commentInfo = res.data;
          this.commentInfoBool = true;
        });
    }
  }
});

app/views/comments/index.html.haml

.container.js-commentsIndex
  .row
    .card.pink.lighten-5
      選択したコメント：
      %span.card-title{'v-if': 'commentInfoBool'}
        {{ commentInfo.body }}

  .row
    - @comments.each do |comment|
      .card
        %span.card-title{'v-on:click': "commentShow(#{comment.id})"}
          = comment.body



= javascript_pack_tag 'comments/index'