こちらのQiitaの記事を参考にしてVue.jsとRailsとAjaxを組み合わせたアプリケーションを作成しています。サイト通りに動かすことはできたのですが、これを少し改良したいと思っています。
GIFで動きを撮りましたこちらのGyazoをみてください
具体的には
現在のコードは
index.html.slim
html
1.container.js-booksIndex 2 .row 3 - @books.each do |book| 4 .card 5 span.card-title v-on:click="setBookInfo(#{book.id})" 6 = book.title 7 8 .row.info v-show='bookInfoBool' 9 .card-content.white-text 10 span.card-title 11 = "Title: {{ bookInfo.title }}" 12 .detail 13 = "Author: {{ bookInfo.author }}" 14 .detail 15 = "Publisher: {{ bookInfo.publisher }}" 16 .detail 17 = "Genre: {{ bookInfo.genre }}" 18 19= javascript_pack_tag 'books/index' 20
index.js
js
1import Vue from 'vue/dist/vue.esm'; 2import axios from 'axios'; 3 4new Vue({ 5 el: '.js-booksIndex', 6 data: { 7 bookInfo: {}, 8 bookInfoBool: false 9 }, 10 methods: { 11 setBookInfo(id){ 12 axios.get(`api/books/${id}.json`) 13 .then(res => { 14 this.bookInfo = res.data; //res.dataにjson形式の詳細ののデータが入っている 15 this.bookInfoBool = true; 16 }); 17 } 18 } 19}); 20
books_controller.rb
ruby
1class Api::BooksController < ApplicationController 2 def show 3 @book = Book.find(params[:id]) 4 render 'show', formats: 'json', handlers: 'jbuilder' 5 end 6end 7
json
1json.title @book.title 2json.author @book.author 3json.publisher @book.publisher 4json.genre @book.genre 5
となっています。
これを最初に説明したようなものにしたいのですが、それぞれのauthorに対してbookInfoBoolに当たるような真偽値を割り振って管理しようと思ったのですが、RailsとJS側でやり取りの仕方がうまく思いつかなくて詰まっています。
author一つ一つをcomponentとして扱って管理できそうですが、具体的なやり方になるとどう書けばいいのかがわかりません。
どなたか教えていただけないでしょうか?
あなたの回答
tips
プレビュー