list-of-books - JSONの表示

Search.vue

<template>
  <v-container>
    <v-row justify="center" class="text-center">
      <v-col>

        <div>
          <h1>検索ページ</h1>
        </div>

        <div>
          <v-text-field v-on:change="OnSearch(search_form['keyword'])" v-model="search_form['keyword']" placeholder="書籍を検索" />
        </div>

        <div>
          <v-text-field v-model="search_form['author']" placeholder="著者を検索" />
        </div>

        <div>
          <v-btn v-on:click="OnSearch(search_form['keyword'], search_form['author'])">検索</v-btn>
        </div>

        <div v-if="items !== null">
          <ul v-for="item in items" v-bind:key="item.id">
            <img v-bind:src=item.Item.largeImageUrl />
            <p>タイトル：{{ item.Item.title }}</p>
            <p>著者：{{ item.Item.author }}</p>
            <p>{{ item.Item.itemCaption }}</p>
            <p>ISBN：{{ item.Item.isbn }}</p>
            <p>出版社：{{ item.Item.publisherName }}</p>
          </ul>
        </div>

      </v-col>
    </v-row>
  </v-container>
</template>

<script>

export default {
  name: "Search",

  components: {},

  data() {
    return {
      search_form: {
        keyword: "",
        author: "",
      },
      items: "",
    }
  },

  methods: {
    OnSearch: async function(search_form) {
      let queryOfKeyword = "";
      if(search_form['keyword'] !== null){
        this.queryOfKeyword = `&title=${search_form['keyword']}`;
      } else {
        this.queryOfKeyword = "null";
      }

      let queryOfAuthor = "";
      if(search_form['author'] !== null){
        this.queryOfAuthor = `&author=${search_form['author']}`;
      } else {
        this.queryOfAuthor = "null";
      }

      const getUrl = `https://app.rakuten.co.jp/services/api/BooksBook/Search/20170404?format=json&applicationId=${process.env.VUE_APP_RAKUTEN_API_APP_ID}${queryOfKeyword}${queryOfAuthor}`
      await this.$axios.get(getUrl).then(response => {
        console.log(response.data);
        this.items = response.data.Items;
      })
    }
  },

  watch: {
    search_form: {
      handler: function() {
        this.OnSearch(true);
      },
      deep: true,
    },
  },

  mounted: function() {
    this.OnSearch(true);
  },
};

</script>

...
  data() {
    return {
      search_form: {
        keyword: "",
      },
      items: "",
    }
  },
...

data の部分をこれだとどうだろ？

this.items = response.data;

を

this.items = response.data.Items;

だとどうだろう？

<ul v-for="item in items" v-bind:key="item.id">
  <li>{{ item[0] }}</li>
</ul>

も

<ul v-for="item in items" v-bind:key="item.id">
  <li>{{ item }}</li>
</ul>

かな？

まず、APIから返ってくる値が

って感じで、TSで書くと

type ResponseData = {
  Items: Item[],
  pageCount: number,
  ...
}

type Item = {
  Item: {
    ...
  }
}

ってなってるから、取得のタイミングで this.items = response.data.Items; って感じに書かないといけない。

で v-for を使う場合は、 v-for="item in items" って書いたとしたら item にはArrayの要素が入ってくる、
今回の場合、Arrayの要素は Item 型なのでその形の値が入ってくる。

それで、このItem型は（なぜか）Item っていうプロパティを持っているから中身を見るときは item.Item.title みたいな感じで書かないと駄目だったって感じかな。

item.Item.title って書くのが嫌だったAPIの結果を取得するタイミングで

this.items = response.data.items.map(x => x.Item)

ってやると item.title って書けると思う