【Vue.js】ファイル名に連番を付けていく方法

vue-awesome-swiperを使うときにファイル名をバラバラにせず、連番にすればスッキリできるのではと思いそのやり方をまとめてみました。

開発環境はNuxt.js + Vuetifyにvue-awesome-swiperを使った状態です。

Nuxt.jsにvue-awesome-swiperを導入し、カルーセルを表示させてみる
【Nuxt.js】imgファイルの指定方法について
【Nuxt.js】Universalモードで「window is not defined」エラーが出たときの対処法

変数を宣言する

const items = []

ループを作る

for (let i=1; i<=5; i++) {
//ここに処理を入力する
}

ループ内の処理を記入する

itemsに数字を足していく処理が必要なのでpushを使用します。

items.push({
  no: i,
  title: 'title' + i,
  slideimage: `/images/home/slide${i}.jpg`
})

※１.画像ファイルの部分ですがシングルクォートで囲っているのではなくバッククォートで囲っている点注意。
※2.スライドショー等で見せたいような画像はコンパイルの時間も減るでstaticに格納するほうがおすすめです。

ただしこのままだとファイル名に変数iによる連番を付加することができますが、ファイル名の連番部分の前の0を付けた"slide01.jpg"のようなフォーマットだと、変数のiが一桁のときに前0を付加する処理が必要になります。

数値のゼロを埋め、桁を揃える

zeroPadding方を応用します。

zeroPadding(index, size) {
  let tmp = index + ''
  while (tmp.length < size) tmp = '0' + tmp
  return tmp
}

まとめる

上記をまとめたコードになります。

index.vue

<template lang="pug">
	section.py-12
		v-layout(column align-center justify-center)
			v-flex(xs12 sm4 class="my-4")
        swiper(:options="swiperOption")
          swiper-slide(v-for="(item, index) in items" :key="index")
            img(:src="item.slideimage" :alt="item.title" :id="item.no")
</template>

<script>
export default {	
	data () {
		const items = []	
		for (let i=1; i<=5; i++) {
      items.push({
        no: i,
				title: 'title' + i,
        slideimage: `/images/home/slide${this.zeroPadding(i, 2)}.jpg`
			})
		}
		return {
			items,
		}
	},
	methods: {
    zeroPadding(index, size) {
      let tmp = index + ''
      while (tmp.length < size) tmp = '0' + tmp
      return tmp
    }
  }
}
</script>

これでファイルの連番については実装できました。
このやり方だと連番はできたのですが個別ごとのテキスト名とかの設定でできないので
複数の項目があるときはjsonで読み込んでv-forで回したほうがいいかもしれませんね。

参考：
数値のゼロ埋め（桁を揃える）
第一回 Vue.jsでWebアプリをつくろう！

追記

String.prototype.padStart()をつかったほうがいいという意見をいただいたので使った方法で書き換えてみました。

<script>
export default {	
	data () {
		const items = []	
		for (let i=1; i<=5; i++) {
      items.push({
        no: i,
				title: 'title' + i,
        slideimage: `/images/home/slide${this.setDigits(i, 2)}.jpg`
			})
		}
	},
	methods: {
		setDigits(number, digits) {
			const number_string = String(number).padStart(digits, '0');
    return number_string;
		}
	}
}
</script>