Vue.jsでv-forが効かずに表示されない

現在いろいろなチュートリアルを見ながら、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件

ベストアンサー

diff
1- <p>{{item.title}}</p>
2+ <p>{{item.volumeInfo.title}}</p>

投稿2019/03/16 07:33

shozi3

総合スコア691

ayachika

2019/03/17 02:10

ご回答いただきありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問