APIデータを取得してグリッド表示とリスト表示を切り替える方法(Vue.js)

2021年5月5日Vue.js

Vue.js v2でaxiosを使ってAPIデータを取得してグリッド表示とリスト表示を切り替える方法を紹介します。
Vue 3でも考え方は使えます。

表示を切り替える方法

今回はボタンを押すと、グリッド表示とリスト表示を切り替えられるように設定します。

script

import axios from "axios";

export default {
  name: "Product",
  data() {
    return {
      layout: 'grid',
      contents: null,
    };
  },
  created: function () {
    axios
      .get("https://....com/photos?_limit=5")
      .then((res) => {
        this.contents = res.data;
      });
  },
};

まずscriptでは、axiosをインポートします。
初期表示をどちらでもいいですが上ではgridを初期値として設定しています。

template – ボタン部分

<!-- top bar -->
<div class="bar">
    <button @click="layout = 'grid'" :class="{ active: layout === 'grid'}">
      <i class="fas fa-th"></i> グリッド
    </button>
    <button  @click="layout = 'list'" :class="{ active: layout === 'list'}">
      <i class="fas fa-list"></i> リスト
    </button>
</div>

グリッドとリストのボタンには、
クリックできるように@clickを設定します。
アクティブな方にactiveというクラスがつくようにv-bindのclass属性を設定します。

template – グリッド・リスト表示部分

そして、表示部分と紐付けます。

  <!-- content -->
<div class="content">
  <!-- grid view -->
  <ul class="grid" v-if="layout === 'grid'">
    <li v-for="content in contents" :key="content.id">
      <div class="image">
        <img :src="content.url" />
      </div>
    </li>
  </ul>
  <!-- list view -->
  <!-- <ul class="list" style="display: none"> -->
  <ul class="list" v-if="layout === 'list'">
    <li v-for="content in contents" :key="content.id">
      <img :src="content.thumbnailUrl" />
      <div class="listContent">
        <h2>{{ content.title }}</h2>
        <p>{{ content.details }}</p>
        <a class="btn" href="#">Read more</a>
      </div>
    </li>
  </ul>
</div>