Help us understand the problem. What is going on with this article?

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`
})

※1.画像ファイルの部分ですがシングルクォートで囲っているのではなくバッククォートで囲っている点注意。
※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>
hiroyukiwk
Nuxt.js/Vue.jsを専門にしているWeb Desiner/Frontend Developperです。 Web制作やSPA,JAMStackなどの開発を主に行っております。
acall
ACALLは、「Life in Work and Work in Life for Happiness」をVISIONとして、どこでも安心・安全・快適なワークスタイルを実現するスマートオフィスプラットフォーム「WorkstyleOS」を開発・提供しています。オフィスワークとリモートワークのベストミックスを通じて、人々の「くらし」と「はたらく」を自由にデザインできる世界を目指します。
https://www.workstyleos.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away