Q&A
現在いろいろなチュートリアルを見ながら、GooglebooksAPIを用いた本の検索アプリを作っています。
Vue.jsでaxiosを用いたJSONデータの取得を行い、ChromeのデベロッパーツールでJSONデータをgetするところまでは、できました。
その後、ブラウザ上にgetしたデータを表示させたいのですが、以下ソースコードのようにすると、表示されません。
なぜ、このようになるのかわかりません。item.titleやitem.authorを表示させたいと考えています。
v-forを削除し、itemを表示させることができたので、v-forに原因があるのかと思いますが、Vue.jsが初心者なこともあり、どこを改良してよいのかわからず悩んでいます。
↓該当アプリと取得したいJSONデータを参考までに掲載しています。
該当アプリ
JSONデータ
どなたか、Vue.jsにお詳しい方、ご教示いただけると幸いです。
##ソースコード
index.html
<html lang="en"> <head> <meta charset="utf-8"> <title>Book Finder</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> </head> <body> <div class="container" id="app"> <h3 class="text-center">Book Finder</h3> <p> 検索キーワード：<form v-on:submit.prevent="getResult(query)"> <input type="text" placeholder="Type in your search" v-model="query" /> </p> <div class="card blue-grey darken-1"> <div class="card" v-for="item in items"> <p>{{item.title}}</p> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script src="main.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios@0.17.1/dist/axios.min.js"></script> </body> </html>
main.js
const vm = new Vue({ el: '#app', data() { return{ query:'', items:[] } }, methods:{ getResult(query){ axios.get("https://www.googleapis.com/books/v1/volumes?q=search" + query).then(response => {console.log(response.data); this.items = response.data; }); } } });
開発環境
cloud9
vue.js 2.9.6
回答1件
0
ベストアンサー
diff
1- <p>{{item.title}}</p> 2+ <p>{{item.volumeInfo.title}}</p>
投稿2019/03/16 07:33
総合スコア691
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/17 02:10