jsonは取得できているのですが、ビューに表示することができません。

前提・実現したいこと

　
jsonは取得できているのですが、ビューに表示することができません。
現在vueの勉強中で、rails+vueでアプリを作りたく、https://qiita.com/cohki0305/items/a678b0b17c5b496c1de9
を試しに手を動かして作成中なのですが、エラーが出てしまっています。

発生している問題・エラーメッセージ

console.logにてid:1を叩くと、

xhr.js:175 GET http://localhost:3000/books/api/books/1.json 404 (Not Found)

Uncaught (in promise) Error: Request failed with status code 404
    at createError (createError.js:17)
    at settle (settle.js:19)
    at XMLHttpRequest.handleLoad (xhr.js:63)

該当のソースコード

index.html.haml

.container.js-booksIndex
  .row
    - @books.each do |book|
      .col.s4.m6
        .card
          %span.card-title{'v-on:click': "setBookInfo(#{book.id})"}
            = book.title

  .row{'v-show': 'bookInfoBool'}
    .col.s12.m12
      .card.blue-grey.darken-1
        .card-content.white-text
          %span.card-title
            {{ bookInfo.title }}
          .detail
            {{ bookInfo.author }}
          .detail
            {{ bookInfo.publisher }}
          .detail
            {{ bookInfo.genre }}


= javascript_pack_tag 'books/index'

javascript
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;
15          this.bookInfoBool = true;
16        });
17    }
18  }
19});
20
21

urlの取得がうまくいっていないとは思うのですが、どのように記述すればいいのかがわかりません。よろしくお願いします。

hatsu

2020/03/18 05:27

http://localhost:3000/books/api/books/1.json のページはJsonが表示されていますでしょうか？

fujitaro

2020/03/18 05:33

表示されておりません。最初のbookを取り除き、 http://localhost:3000/api/books/1.json ならば取得できています。おそらく axios.get(`api/books/${id}.json`) の記述の仕方が悪いと思うのです。 http://localhost:3000/books/　＋　api/books/1.json になってしまってエラーが出ているので http://localhost:3000/api/books/1.json ともっていければ表示できると思うのですが。このように記述するにはどうすればいいのでしょうか？

fujitaro

2020/03/18 05:35

ちなみに http://localhost:3000/books/ をルート表示にして、 http://localhost:3000 とし、そこから axios.get(`api/books/${id}.json`) とすれば http://localhost:3000/api/books/1.json になり正しい結果が表示されるのですが… http://localhost:3000/books/から http://localhost:3000/api/books/1.json にするにはどうすればいいのでしょうか。よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1`../api/books/${id}.json`
2`/api/books/${id}.json`

のどちらかでは？

投稿2020/03/19 02:30

yambejp

総合スコア114784

fujitaro

2020/03/19 09:14

解決致しました！その通りでした。ありがとうございます。

fujitaro

2020/03/19 11:26

よろしければ、どうしてこれで解決するのか教えていただけないでしょうか？

yambejp

2020/03/19 11:31

自分が「/books」にいて、相対path「api/books/${id}.json」を指定すればルートからみて/books/api/books/${id}.jsonになってしまいます apiの置き場が/apiなのですから `../api/books/${id}.json`→1個さかのぼって相対的に `/api/books/${id}.json`→絶対pathで指定

fujitaro

2020/03/19 11:43

最初の記述が相対だという認識がありませんでした。おかげでよく分かりました！ありがとうございます！

行動規範の内容に同意します