はじめに

湧き水APIを用いて熊本県の湧水一覧をVueのフレームワークであるVuetifyのtableで表示させてみました。
大まかな流れは以下の通りです。

SpringWaterApi.vueページを追加するためにrouterの設定
SpringWaterApi.vueにてaxiosを用いて湧き水のAPIを叩く
SpringWaterApi.vueにて結果をテーブルで表示

開発環境

Windows 11
Vue 2.7.14
Node.js 14.17.5

完成系

完成するとブラウザに以下のように表示されます。

完成系のソースコードは以下になります。

SpringWaterApi.vue

<template>
    <v-app>
        <v-data-table
            :headers="headers"
            :items="paginatedItems"
            :server-items-length="totalItems"
            :loading="loading"
            :page.sync="page"
            :items-per-page="itemsPerPage"
        >
       <template v-slot:item="{ item }">
          <tr>
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>  
            <td>{{ item.furigana }}</td>                      
            <td>{{ item.address }}</td>                      
            <td>{{ item.latitude }}</td>                      
            <td>{{ item.longitude }}</td>                      
            <td>{{ item.overview }}</td>   
        </tr>
        </template>
        </v-data-table>
    
        <v-pagination
          v-model="page"
          :length="totalPages"
          @input="getPaginatedItems"
        ></v-pagination>
    </v-app>
  </template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      headers: [
        { text: 'ID', value: 'id' },
        { text: '名前', value: 'name' },
        { text: 'ふりがな', value: 'furigana' },
        { text: '住所', value: 'address' },
        { text: '緯度', value: 'latitude' },
        { text: '経度', value: 'longitude' },
        { text: '概要', value: 'overview' },
      ],
      items: [],
      paginatedItems: [],
      totalItems: 0,
      page: 1,
      itemsPerPage: 10,
      loading: false,
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.itemsPerPage);
    },
  },
  created() {
    this.getPaginatedItems();
  },
  methods: {
    getPaginatedItems() {
      this.loading = true;
      axios
        .get('https://livlog.xyz/webapi/springWater?q=熊本県')
        .then((response) => {
          this.items = response.data.result;
          this.totalItems = response.data.result.length;
          this.paginatedItems = this.items.slice(
            (this.page - 1) * this.itemsPerPage,
            this.page * this.itemsPerPage
          );
          this.loading = false;
        })
        .catch((error) => {
          console.error(error);
          this.loading = false;
        });
    },
  },
};
</script>

このソースコードについて、これから説明していきます。

説明

今回はVue CLIを利用して作成したデフォルトのアプリに、SpringWaterApi.vueを追加する形で実装しています。
ファイル構成は以下のとおりです。

srcの中身
componentsの中身
routerの中身

SpringWaterApi.vueページを追加するためにrouterの設定

まず、HelLoWorld.vueからSpringWaterApi.vueに飛ぶためのrouterの設定をします。
srcフォルダの中に、router.jsというファイルを作成し、以下のように記述します。

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/HelloWorld.vue'
import SpringWaterApi from '../components/SpringWaterApi.vue'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/springwaterapi', component: SpringWaterApi }
  ]
})

次に、main.jsに以下のソースコードを追加します。

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/router' //追加
import vuetify from './plugins/vuetify'

Vue.config.productionTip = false

new Vue({
  router, //追加
  vuetify,
  render: h => h(App)
}).$mount('#app')

また、HelLoWorld.vueにSpringWaterApi.vueへのリンクが表示されるように、App.vueのtemplateの中身も以下のように書き換えます。

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

これで、HelLoWorld.vueからSpringWaterApi.vueに飛ぶrouterの設定が完了しました。

SpringWaterApi.vueにてaxiosを用いて湧き水のAPIを叩く

続いて、SpringWaterApi.vueにて、axiosを用いて湧き水のAPIを叩きます。

湧き水API
湧水APIについては、以下の記事を参照ください。

axios
Vueでaxiosを用いてAPIを叩く方法については、以下の記事を参照ください。
この記事のURLを、湧き水APIのURLに変更すれば、湧き水APIを叩くことができます。

axiosのGETリクエストのURLを***https://livlog.xyz/webapi/springWater?q=熊本県***に変更します。
クエリパラメータは熊本県で、JSON形式のレスポンスから「ID、名前、ふりがな、住所、緯度、経度、概要」の結果が得られます。

SpringWaterApi.vueにて結果をテーブルで表示

湧き水APIにアクセスできたら、その結果をVuetifyのテーブルを使用して表形式で表示します。
まずは、scriptタグ内で表示するデータの中身を設定します。

scriptタグ内のソースコードは以下のとおりです。

SpringWaterApi.vue

data() {
    return {
      headers: [
        { text: 'ID', value: 'id' },
        { text: '名前', value: 'name' },
        { text: 'ふりがな', value: 'furigana' },
        { text: '住所', value: 'address' },
        { text: '緯度', value: 'latitude' },
        { text: '経度', value: 'longitude' },
        { text: '概要', value: 'overview' },
      ],
      items: [],
      paginatedItems: [],
      totalItems: 0,
      page: 1,
      itemsPerPage: 10,
      loading: false,
    };
  },

headersは表のヘッダー項目を表します。
itemsの中にresponsedで得られたデータが入ります。
paginatedItemsはページを分割します。
totalItemsはページの最大数です。
pageは初めに表示するページです。
itemsPerPageを1ページごとに表示されるデータの数です。今回は1ページに10データ表示されるようにしています。
loadingはテーブル内のデータがロード中の時、ロード画面を表示します。今回はfalseにしています。

表示するデータの中身が決まったら、templateタグ内で表示させます。
Vuetifyではv-data-tableの中にtrやtdなどを用いて表を出力することができます。
v-paginationではページネーションを設定することができます。

templateタグ内のソースコードは以下のとおりです。

SpringWaterApi.vue

        <v-data-table
            :headers="headers"
            :items="paginatedItems"
            :server-items-length="totalItems"
            :loading="loading"
            :page.sync="page"
            :items-per-page="itemsPerPage"
        >
       <template v-slot:item="{ item }">
          <tr>
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>  
            <td>{{ item.furigana }}</td>                      
            <td>{{ item.address }}</td>                      
            <td>{{ item.latitude }}</td>                      
            <td>{{ item.longitude }}</td>                      
            <td>{{ item.overview }}</td>   
        </tr>
        </template>
        </v-data-table>

        <v-pagination
          v-model="page"
          :length="totalPages"
          @input="getPaginatedItems"
        ></v-pagination>

まとめ

今回は、湧き水APIを用いて熊本県の湧水一覧をVueのフレームワークであるVuetifyのtableで表示させてみました。
Vuetifyでは簡単にtableを表示できることができるので、今後も勉強していきます！