#4 Rails × Vue.jsで動的なページをSPAさせる(リベンジ)

前回の続き。

#1~#3まで、users#showをSPA化させようとしてました。
つまりユーザーが投稿した画像一覧を表示させていきたかったんですが、
如何せん画像のjson形式で受け渡す処理を書くのが難しくて、、、、。
しかも投稿一覧なので、配列の画像一つ一つ処理をしてってのが難しいので、
一枚の画像をjson形式でrailsからvueに受け渡したいとおもいます。

いざリベンジ！

解説は前回のシリーズでしてるので、今回は前回解説したところは解説なしでいきます。

route.rb

  namespace :api, format: 'json' do
    resources :drinks, only: [:show]
  end

soichirohara@SoichironoMacBook-Pro coffee_passport % rails g controller api/drinks

api/drinks_controller.rb

class Api::DrinksController < ApplicationController
  def show
    @drink = Drink.find(params[:id])
    #@user = @drink.user
    #@comment = Comment.new
   # @comments = @drink.comments.includes(:user).order('created_at DESC')
  end
end

drink(投稿)の画像の受け渡しに注力するため、一旦その他の記述は無視

jbuilder 使うかわからんけど、一旦

touch app/views/api/drinks/show.json.jbuilder

を実行。

app/views/drinks/show.json.jbuilder

json.(@drink, :name , :price , :explain ,
                     :region_id , :body_id , 
                     :acidity_id , :processing_id ,
                     :likes_count , :user_id)

今回は配列ではなく単一のデータなのでこんな感じでかく

app/javascript/app.vue

<template>

<div id="id">
  {{drinks}}
</div>

</template>

<script>
export default {
  data: function (){
    return{
      drinks: "drinks"
    }
  },
  mounted () {
    this.setDrink();
  },
  methods: {
    setDrink: function(){
      axios.get('/api' + location.pathname)
        .then(response => (
          this.drinks = response.data
        ))
    }
  }
}
</script>

まぁ

https://qiita.com/terufumi1122/items/bdc96617c818dac01b6d
https://qiita.com/tabakazu/items/5489632c534c56db6a4d
https://qiita.com/ozin/items/5ec81a4b126b8ebf7a96
これらの記事を参考にしていく。

show.json.jbuilder

json.(@drink, :name , :price , :explain ,
                     :region_id , :body_id , 
                     :acidity_id , :processing_id ,
                     :likes_count , :user_id)

json.image rails_blob_url(@drink.image) if @drink.image.attached?

こんな感じで書いて

localhost:3000/api/drinks/9
にアクセスすると
{"name":"SSS","price":3000,"explain":"ddddd","region_id":1,"body_id":1,"acidity_id":1,"processing_id":1,"likes_count":null,"user_id":7,"image":"http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBFdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--298eaaf8b1f1cd2a3d527cd25f42ee99cac79e9f/anastasiia-chepinska-lcfH0p6emhw-unsplash.jpg"}
なんだかそれっぽい文字列が表示された。
おそらくjson形式で画像データを送ることには成功した？っぽい。。。

rails_blob_urlとは、
https://rails.256.tips/ja/part/7/3.html#%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E4%BD%BF%E3%81%86

ファイルのリンクを生成するためのメソッドらしい。引数に渡したavtive strageのオブジェクトを表示させる

とりあえず

app.vue

  {{drinks.image}}

こんな感じで書いてみたが、
当然、
http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBFdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--298eaaf8b1f1cd2a3d527cd25f42ee99cac79e9f/anastasiia-chepinska-lcfH0p6emhw-unsplash.jpg

このような文字列が
http://localhost:3000/drinks/9
に表示されるだけ。

app.vue

  <img v-bind:src="drinks.image">

とやってみると

キターーーーーー！！！！!!

みなさんにスクショをみせたいのですが、
画像が何度やってもアップロードできないけど、たしかに画像データをjson
形式で表示させることにせいこうしました！！
ここからdriks/show.html.erbをvueで書き直したいと思います！！
もうここまできたら80%は終わったようなものなので本当に嬉しい！！！！！