質問編集履歴

4

タイトルを変更

2021/06/02 22:33

投稿

kaji120
kaji120

スコア39

test CHANGED
@@ -1 +1 @@
1
- Rails + Nuxt.js + 外部APIの使につ
1
+ Nuxt.js でaxisosを用いたデータの取得方法
test CHANGED
File without changes

3

エラーコードの更新

2021/06/02 22:33

投稿

kaji120
kaji120

スコア39

test CHANGED
File without changes
test CHANGED
@@ -38,9 +38,9 @@
38
38
 
39
39
  <li v-for="book in books" :key="book.id">
40
40
 
41
- <p>{{ book.id }}</p>
41
+ <p>{{ book.volumeInfo.id }}</p>
42
42
 
43
- <p>{{ book.title }}</p>
43
+ <p>{{ book.volumeInfo.title }}</p>
44
44
 
45
45
  </li>
46
46
 

2

不要な文言を削除

2021/06/02 22:32

投稿

kaji120
kaji120

スコア39

test CHANGED
File without changes
test CHANGED
@@ -15,12 +15,6 @@
15
15
  ### 発生している問題・エラーメッセージ
16
16
 
17
17
 
18
-
19
- ```
20
-
21
- エラーメッセージ
22
-
23
- ```
24
18
 
25
19
  ![イメージ説明](dd80c0e54ff9e37aa2fd70b3da256bb6.png)
26
20
 

1

詳しい状況を追記

2021/06/02 22:17

投稿

kaji120
kaji120

スコア39

test CHANGED
File without changes
test CHANGED
@@ -2,10 +2,132 @@
2
2
 
3
3
 
4
4
 
5
- 現在、RailsAPIモード + Nuxt.js + GoogleBooksAPIで書籍を検索して登録するアプリを作成していますが調べても知識不足のせいかわからなかったため質問させて頂きます
5
+ 現在、RailsAPIモード + Nuxt.js + GoogleBooksAPIで書籍を検索して登録するアプリを作成しています。
6
+
7
+ Nuxt.jsのaxiosで本の情報を取得→Railsで本の情報を登録
8
+
9
+ としたいのですが、axiosでGoogleBooksAPIから本情報を取得できませんでした
6
10
 
7
11
 
8
12
 
9
- 通常、RailsをAPIモードで使用して、GoogleBooksAPIのような外部APIを使用したアプリを作成したい場合は、Railsで外部API情報を取得してNuxt.jsでViewに反映させるのでしょうか。
10
13
 
14
+
15
+ ### 発生している問題・エラーメッセージ
16
+
17
+
18
+
19
+ ```
20
+
21
+ エラーメッセージ
22
+
23
+ ```
24
+
25
+ ![イメージ説明](dd80c0e54ff9e37aa2fd70b3da256bb6.png)
26
+
27
+
28
+
29
+ ```Nuxt
30
+
31
+ <template>
32
+
33
+ <div>
34
+
35
+ <input v-model="keyword" type="text">
36
+
37
+ <v-btn @click="get">
38
+
39
+ 検索ボタン
40
+
41
+ </v-btn>
42
+
43
+ <p>検索結果を表示</p>
44
+
45
+ <li v-for="book in books" :key="book.id">
46
+
47
+ <p>{{ book.id }}</p>
48
+
49
+ <p>{{ book.title }}</p>
50
+
51
+ </li>
52
+
53
+ </div>
54
+
55
+ </template>
56
+
57
+ <script>
58
+
59
+ export default {
60
+
61
+ data () {
62
+
63
+ return {
64
+
65
+ books: [],
66
+
67
+ error: false,
68
+
69
+ keyword: ''
70
+
71
+ }
72
+
73
+ },
74
+
75
+
76
+
77
+ methods: {
78
+
79
+ get () {
80
+
11
- それとも、Nuxt.jsで外部API情報を取得して書籍を登録するときにRailsに渡してあげれば良いのでしょうか。Nuxt.jstoとaxiosで直接情報を持ってきてviewに反映させている記事は多く見つけたのですがバックエンドでRailsを使用している状況での記事が見つけられなかったため質問させて頂きます。
81
+ const url = 'https://www.googleapis.com/books/v1/volumes?q='
82
+
83
+ this.$axios(url + this.keyword + '&maxResults=20')
84
+
85
+ .then(this.setBooks).catch(this.setError)
86
+
87
+ },
88
+
89
+ // APIリクエスト後の処理
90
+
91
+ setBooks (res) {
92
+
93
+ this.books = res.items
94
+
95
+ },
96
+
97
+ setError (err) {
98
+
99
+ console.log(err)
100
+
101
+ this.error = true
102
+
103
+ }
104
+
105
+
106
+
107
+ }
108
+
109
+ }
110
+
111
+ </script>
112
+
113
+
114
+
115
+ ```
116
+
117
+
118
+
119
+ ### 試したこと
120
+
121
+
122
+
123
+ ・GoogleBooksAPIの使用方法を再確認
124
+
125
+ ・Nuxt.jsの公式でaxiosについて確認
126
+
127
+
128
+
129
+ ### 補足情報(FW/ツールのバージョンなど)
130
+
131
+ Rails 6.03 APIモード
132
+
133
+ Nuxt 2.15