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

とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その7
最後は細かいテクニック的なところについて

ローディング

API から投稿データ取得するまでローディング、取得後に解除する
DOM更新後にローディング解除したいので $nextTick を使う

mounted: function () {
  this.$nextTick(function () {
    // 処理
  })
}

loading.vue

<template>
  <transition name="fade">
    <template v-if="!loading">
      <p>loading</p>
    </template>
    <template v-else>
      <child-component></child-component>
    </template>
  </transition>
</template>

<script>
import ChildComponent from './childComponent';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      loading: true
    }
  },
  mounted: function () {
    this.$nextTick(function () {
      this.loading = false;
    })
  }
};
</script>

配列からオブジェクトへ変換

array

[
  [
    "https://siteUrl/image01.jpg",
    1718,
    1150,
    false
  ],
  [
    "https://siteUrl/image02.jpg",
    896,
    1248,
    false
  ],
  [
    "https://siteUrl/image03.jpg",
    1722,
    1148,
    false
  ]
]

を

formattedArray

[
  {
    "src": "https://siteUrl/image01.jpg",
    "w": 1718,
    "h": 1150
  },
  {
    "src": "https://siteUrl/image02.jpg",
    "w": 896,
    "h": 1248
  },
  {
    "src": "https://siteUrl/image03.jpg",
    "w": 1722,
    "h": 1148
  }
]

にしたい

array.forEach(function(v){
  const temp = {
    src: v[0], // 画像URL
    w:   v[1], // 横幅
    h:   v[2]  // 縦幅
  };
  formattedArray.push(temp)
});

とすると formattedArray は欲しいフォーマットになる

ループでランダムな数値をつける

最初にデータの整形とランダム数値の付与

imagesArray

[
  "https://siteUrl/image01.jpg",
  "https://siteUrl/image02.jpg",
  "https://siteUrl/image03.jpg"
]

を

imagesObject

[
  {
    "src": "https://siteUrl/image01.jpg",
    "delay": "0.20"
  },
  {
    "src": "https://siteUrl/image02.jpg",
    "delay": "0.47"
  },
  {
    "src": "https://siteUrl/image03.jpg",
    "delay": "0.72"
  }
]

にしたい。
ここも forEach だけど、他のやり方がありそう

const imagesObject = [];
imagesArray.forEach((value) => {
  const delayRandomNum = (Math.random() * 1 + 0).toFixed(2); // 0 〜 1 までの乱数（小数点2桁に丸める）をアニメーション遅延させる
  imagesObject.push({
    src: value,
    delay: delayRandomNum
  })
});
this.imagesObject = imagesObject

オブジェクトを作成処理ができたら <template> 箇所で

<template>
  <div
    v-for="(image, index) in imagesObject"
    :key="index"
  >
    <img
      :src="image.src"
      :style="{ transitionDelay: image.delay + 's' }"
    >
  </div>
</template>

とする。HTMLは

<div><img src="https://siteUrl/image01.jpg" style="transition-delay: 0.20s;"></div>
<div><img src="https://siteUrl/image02.jpg" style="transition-delay: 0.47s;"></div>
<div><img src="https://siteUrl/image03.jpg" style="transition-delay: 0.72s;"></div>

となるのであとはcssで調整