axiosを使用したapi通信でエラーが発生してしまいます。

Question

概要

Vueでaxiosを使用してspread sheet apiからシート内容のデータをgetする際に、下記のようなエラーが発生してしまい、解決方法がわかりません。

対応

books.dataのdataに問題があるというエラーが発生していたため、axiosでget後にthenでconsole.log(this.data)を出してみたところ、dataの値がundefinedという結果がでました。この部分に問題があるということは間違い無いと思いますが、解決方法がわかりません。もしわかる方がいましたら教えていただきたいです。
よろしくお願いします！

コード

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" class="logo">
    <HelloWorld msg="Book Management"/>
    <div>
      <v-layout row class="book-list">
        <v-flex xs12 sm6 offset-sm3>
          <v-card>
            <v-toolbar color="teal" dark>

              <v-toolbar-title class="text-xs-center book-list__title">Book List</v-toolbar-title>

              <v-spacer></v-spacer>

              <v-text-field label="Search your book"></v-text-field>
            </v-toolbar>

            <v-list subheader class="pt-3" v-if="books.data">
              <v-subheader>貸出可能な本</v-subheader>
              <v-list-tile v-for="book in books.data" :key="book.id">
                <v-list-tile-content v-if="book.title">
                  <v-list-tile-title v-html="book.title"></v-list-tile-title>
                </v-list-tile-content>
              </v-list-tile>
            </v-list>
          </v-card>
        </v-flex>
      </v-layout>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue';
import axios from 'axios';
import WebFontLoader from 'webfontloader';

export default {
  name: 'home',
  components: {
    HelloWorld,
  },
  data() {
    return {
      message: 'Book Management',
      books: null,
      headers: {
        'Content-Type': 'application/json;charset=UTF-8',
        'Access-Control-Allow-Origin': '*',
      },
    };
  },
  mounted() {
    WebFontLoader.load({
      google: {
        families: ['Roboto:100,300,400,500,700,900'],
      },
      active: this.setFontLoaded,
    });
    axios
      .get('[spread sheet url]', this.headers)
      .then(response => (this.books = response))
      .then(() => (console.log(this.data)));
  },
  methods: {
    setFontLoaded() {
      this.$emit('font-loaded');
    },
  },
};
</script>

Answer 1

多分

data() {
 ...
}

の部分を取得したいためthis.dataってやってると思いますが、methodsではないのでこの手法ではアクセスできません。
ソース見る限りthis.booksを出力すればいいのではと思いますが、調べたらthis._dataで取れるっぽいです。

あと、よくみたら

<v-list subheader class="pt-3" v-if="books.data">

の部分のエラーはbooksがnullなのでbooks.dataは参照できないというエラーなので

<v-list subheader class="pt-3" v-if="books && books.data">

にすればよいかと

Comments

[aa316316]

>rururu3 ありがとうございます！v-ifの書き方に問題があったのですね。
アドバイスを参考に無事解決することができました！