WordPress に Vue.js を スモールスタートで入れてみる その5

とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その5 今回はモジュールについて

Isotope

レンガ式のレイアウトをするためにnpmモジュールがいろいろあります。
vue-masonry を最初使ってましたが、実行タイミングが早かったり、vue-masonry-css はCSSでレイアウトするので軽いのですがflexboxではレイアウトがうまくいかなかったりで結局 isotope-layout を使いました。

今回の場合は、各投稿のACFギャラリー形式で登録した画像をIsotopeでレイアウトしたい
ACFギャラリー: https://www.advancedcustomfields.com/resources/gallery/
フィールド名は sample_gallery とする
画像URLとwidth/heightが入っているので、img に指定しておく

読み込み時にガタガタしないようにするにはもう少し調整が必要

sampleGallery.vue

<template>
  <ul class="sampleGallery" v-if="sampleGallery">
    <li class="grid-sizer"></li>
    <li class="gutter-sizer"></li>
    <li
      class="sampleGallery__image"
      :key="index"
      v-for="(image, index) in sampleGallery"
    >
      <img
        alt=""
        :src="image.sizes.thumbnail"
        :width="image.sizes['thumbnail-width']"
        :height="image.sizes['thumbnail-height']"
      >
    </li>
  </ul>
</template>

<script>
import { API_POST_URL } from './../variable';
import axios from 'axios';
const Isotope = require('isotope-layout');

export default {
  data() {
    return {
      sampleGallery: ''
    }
  },
  mounted() {
    axios
      .get(`${API_POST_URL}/POSTTYPE/${POST_ID}/`)
      .then(response => {
        this.sampleGallery = this.post.acf.sample_gallery
        this.layoutGallery()
      })
  },
  methods: {
    // Isotope レイアウト
    layoutGallery() {
      this.iso = new Isotope('.sampleGallery', {
        itemSelector: '.sampleGallery__image',
        masonry: {
          columnWidth: '.grid-sizer',
          gutter: '.gutter-sizer'
        }
      });
      this.iso.layout();
    }
  }
};
</script>

次回はPhotoSwipeのvueモジュール編