googleスプレッドシートのデータをjsonで吐き出して、NUXTでセクションごとにリスト表示する

1703 ワード
GoogleSpreadSheet Vue.js nuxt.js axios GoogleAppsScript GoogleAppsScript テキストリンク

スプレッドシートのデータを取得して、データをセクションごとにリスト表示させたのを忘れないようメモ。
axiosでGETしてくるとこが遅いので改善したい。

スプレッドシートに表を用意

データをjson形式で出力。

方法はここを参考。
https://qiita.com/YukiIchika/items/778856a7ea92e5a2383c

NUXT側でデータを取得する。

ここを参考。
https://ma-vericks.com/nuxt-axios/

vueファイル内で

export default {
  async asyncData({ $axios }) {
    const url = 'https://script.google.com/macros/s/ID/exec';
    // リクエスト（Get）
    const response = await $axios.$get(url);
    // 配列で返ってくるのでJSONにして返却
    return { result: response }
  }
};
</script>

セクションごとにリスト表示させる

これのためにsectionsKeyを設定しておく。

<ul>
  <template v-for="item in result">
    <template v-if="item.sectionsKey === 1">
      <li>
        <nuxt-link :to="item.url">{{ item.pages }}</nuxt-link>
      </li>
    </template>
  </template>
</ul>