v-forを用いて、データが表示されない

現在、google bools apiを用いた本の検索と気になる（保管）機能の実装したサイトを制作しております。

現状できていること）
・検索を押して本を表示させること
・気になるボタンを押して、firebaseにidとtitleを保管すること

やりたいこと）
気になるボタンのクリックイベントでapi内のIDとタイトルを画面上の気になるリストに登録する

詰まっているところ）
idとtitleが気になるリストの画面に表示されない

（ this.booksFavs = firebase
.database()
.ref('my-key')
.orderByChild('setData');）
の部分に修正が必要と思われます。

上記において、アドバイスを頂けると助かります。
よろしくお願いいたします。

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Favorite Books</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" href="main.css">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
　<header>
    <div class="hamburger-menu" id="favoshelf">
        <input type="checkbox" id="menu-btn-check">
        <label for="menu-btn-check" class="menu-btn"><span></span></label>
        <div class="menu-content">
            <ul>
                <li>
                <p>気になるリスト</p>
                </li>
                <li v-for="booksFav in booksFavs"
                    v-bind:key="booksFav">
                  　{{booksFav}}
                </li>
            </ul>
        </div>
    </div>
  </header>
    <div class="container" id="app">
      <h3 class="text-center">My Favorite Books</h3>
      <form v-on:submit.prevent="getResult(query)">
        <div id="input" class="input-group mx-auto col-lg-6 col-md-8 col-sm-12">
            <input id="search-box" type="text" class="form-control" placeholder="検索文字を入力" v-model="query">
            <button id="search" class="btn btn-primary" onclick="">検索</button>
        </div>
          <div class="book_wrapper">
            <div class="book_card" v-for="item in items">
              <div class="row no-gutters">
                <div class="col-md-4">
                  <img class="card-img" v-bind:src="item.volumeInfo.imageLinks?.thumbnail" />
                </div>
            　　
                <div class="col-md-8">
                  <div class="card-body">
                    <h5 class="card-title">{{item.volumeInfo.title}}</h5>
                    <p class="card-text">{{item.volumeInfo.authors}}</p> 
                    <p>{{item.id}}</p>
                    <p class="card-text"><small class="text-muted">{{item.volumeInfo.publisher}}</small></p>    
                  </div>

                  <div class="book_button">
                    <a v-bind:href="item.volumeInfo.previewLink" class="waves-effect waves-light btn" target="_blank">show detail</a>
                  </div>
                  <button v-on:click="addFavorite(item.id,item.volumeInfo.title)" class="btn btn-light">気になる</button>
                    
                  
                </div>
          </div>
        </div>
       </div>
    </div>
    
    <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-database.js"></script>
    <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-storage.js"></script>
    
    <script>
    //Your web app's Firebase configuration
    const firebaseConfig = {
    apiKey: "””””””",
    authDomain: "orizinal-site.firebaseapp.com",
    databaseURL: "https://orizinal-site-default-rtdb.firebaseio.com",
    projectId: "orizinal-site",
    storageBucket: "orizinal-site.appspot.com",
    messagingSenderId: "97156991131",
    appId: "1:97156991131:web:59a83b8e9a1dcec82b5e3e"
  };
    // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>
  
  <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>

Javascript

const vm = new Vue({
  el: '#app',
  data() {
    return{
      query:'',
      items:[], //#apiから取得したデータを格納
    };
    booksFavs:{
         response.data.items.id;
         response.data.items.volumeInfo.title;
    }
  },
  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.items;

        const bookDate =response.data?.items?.volumeInfo?.imageLinks?.thumbnail;
         if(typeof bookDate == "undefined") {
         console.log("未定義です。");
        }
      this.booksFavs =  firebase
        .database()
        .ref('my-key')
        .orderByChild('setData');
      });
    },

    addFavorite(setId,setTitle) {
      //気になるボタンの本のIDとtitleを取得する
      let setDatas = {
        id    : setId,
        title : setTitle
      };
      //IDとtitleをfirebaseに登録する
      firebase
        .database()
        .ref('my-key')
        .push(setDatas);
    }
  }
});

tomomo

2021/06/01 21:24

firebasejsというの知らないのでアレなのですが、Vueライブラリは読み込む必要はないのでしょうか？あとデータが表示されないとのことですが、コンソールにはエラーとかは表示されてないですか？

FKM

2021/06/02 00:16

itemsの中身はどうなっていますか？

tamaharu31

2021/06/02 15:27 編集

itemsの中身は以下のようになっております。 tems: Array(10) 　0: 　accessInfo: Object 　etag: "q1pOLjF+ueM" 　id: "peklNwAACAAJ" 　kind: "books#volume" 　saleInfo: Object 　searchInfo: Object 　selfLink: "https://www.googleapis.com/books/v1/volumes/peklNwAACAAJ" 　volumeInfo: Object 　　allowAnonLogging: (...) 　　authors: （．．．）canonicalVolumeLink: (...) 　　contentVersion: (...) 　　description: （．．．）　　industryIdentifiers: (...) 　　infoLink: (...) 　　language: (...) 　　maturityRating: (...) 　　pageCount: (...) 　　previewLink: (...) 　　printType: (...) 　　publishedDate: (...) 　　readingModes: (...) 　　title: "、○○○○"

tomomo

2021/06/02 15:38

一番下にvueありましたね。誤った質問してすみません。