Vue.jsのv-forの使い方！一覧表示するサンプルコード2つ！

Vue.js Vue.js
2022.02.18

今回はVue.jsのv-forについて書いています。
v-forを使用すると、JavaScriptで作成した配列の内容から要素を繰り返して表示することができます。

記事の内容としては、最初にv-forの使い方について説明して、その後にサンプルコードを2つ載せています。
サンプルコードはVue.jsのバージョン3を使用して、Options APIまたはComposition APIを使ったパターンを書いています。

v-forの使い方は？

v-forを使う時にはJavaScriptの配列のデータを使用します。
例として、fruitsという配列に入っているデータを表示したい場合は、下記のように使用します。

<div v-for="fruit in fruits" :key="fruit">
  {{ fruit }}
</div>

fruits配列の要素がひとつずつfruit変数に入って、要素がある間繰り返して、このdivタグを表示してくれます。(:keyについては後述)
スクリプトは下記のように、fruits配列が定義されている必要があります。

export default {
  data: () => {
    return {
      fruits: ["みかん", "りんご", "メロン", "いちご", "ぶどう"],
    }
  },
}

こうすると、配列のデータを一覧表示することが可能です。
上記の内容は、このようになります。

Vue.jsでv-forの使い方！

気をつけることとして、v-forを使う時には:keyをつける必要があります。
これはv-bind:keyの略で、配列の一意になるキーを書いておく必要があります。

今回、上記ではkeyとして、配列の要素(fruit)を使用しました。

日本語でまとめると下記のようになります…

<任意のタグ v-for="[配列の要素] in [配列]" :key="[一意のキー]">
  {{ fruit }}
</任意のタグ>

配列の要素番号(インデックスが欲しい）場合は？

配列の要素番号が欲しい場合は、下記のようにして取得することが可能です。

<div v-for="(fruit, index) in fruits" :key="fruit">
  {{ index }}:{{ fruit }}
</div>

要素を取得するところを、(要素, インデックス)とすることで、indexに要素番号が入ってきます。
先ほどのfruits配列の状態で、表示させた場合は下記のようになります。

Vue.jsのv-forでindexを使用する

v-forを使用したサンプルコード

v-forを使用したサンプルを下記に載せています。

v-forで文字列の配列を表示する

先ほどの果物配列を使用したサンプルコードです。
TailwindCSSを使って、リストを綺麗に表示してみました。

<template>
  <div class="m-3 w-5/12 bg-white rounded-lg shadow">
    <ul class="divide-y-2 divide-gray-100">
      <li class="p-3 hover:bg-blue-100" v-for="(fruit, index) in fruits" :key="fruit">
        {{ index }}:{{ fruit }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data: () => {
    return {
      fruits: ["みかん", "りんご", "メロン", "いちご", "ぶどう"],
    };
  },
};
</script>

内容としては、使い方の説明と同様になります。
dataプロパティで宣言しているfruits配列をv-forを使用して、ループさせて要素を表示しています。

Vue.jsのv-forで果物一覧作成

v-forで文字列の配列を表示する（Composition API)

同上の処理をVue.jsのバージョン3のComposition APIを使用した書き方にすると、下記のようになります。

<template>
  <div class="m-3 w-5/12 bg-white rounded-lg shadow">
    <ul class="divide-y-2 divide-gray-100">
      <li
        class="p-3 hover:bg-blue-100"
        v-for="(fruit, index) in fruits"
        :key="fruit"
      >
        {{ index }}:{{ fruit }}
      </li>
    </ul>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  setup () {
    const fruits = ref(["みかん", "りんご", "メロン", "いちご", "ぶどう"])

    return {
      fruits
    }
  }
}
</script>

v-forでオブジェクトの配列を使う

オブジェクトの配列を使って、要素を繰り返し表示することも可能です。
下記サンプルになります。

<<template>
  <div>
    <div class="m-3 w-5/12 bg-white rounded-lg shadow">
      <ul class="divide-y-2 divide-gray-100">
        <li class="p-3 hover:bg-green-100" v-for="user in users" :key="user.id">
          {{ user.name }}さんは、{{ user.age }}歳の{{ user.gender }}性です。
        </li>
      </ul>
    </div>
    <button @click="sortArray" class="rounded border bg-blue-600 py-2 px-3 m-3 text-sm text-white hover:bg-blue-800">
      ソート
    </button>
  </div>
</template>
<script>
export default {
  data: () => {
    return {
      users: [
        {
          id: 1,
          name: '山田',
          age: '22',
          gender: '男',
        },
        {
          id: 2,
          name: '鈴木',
          age: '23',
          gender: '男',
        },
        {
          id: 3,
          name: '佐藤',
          age: '21',
          gender: '女',
        },
      ],
    };
  },
  methods: {
    sortArray: function () {
      this.users.sort((a, b) => { return b.id - a.id });
    }
  },
};
</script>

コードの解説です。
ulタグ配下のliタグをv-forでループさせています。

<li class="p-3 hover:bg-green-100" v-for="user in users" :key="user.id">
  {{ user.name }}さんは、{{ user.age }}歳の{{ user.gender }}性です。
</li>

使用しているのはusers配列で、users配列の中にはオブジェクトが複数入っています。
プロパティとしては下記のように、ID・名前・年齢・性別を保持しています。

{
  id: 1,
  name: '山田',
  age: '22',
  gender: '男',
}

今回v-forのキーとしては、一意になるIDを設定しました。
それぞれuser変数にオブジェクトが取り出されて、プロパティにアクセスすることが可能です。
user.nameで名前、user.ageで年齢、user.genderで性別をそれぞれ取り出して文字列にして表示しています。

あとはソートボタンを用意していて、押された時にIDの降順に並ぶようにしてみました。
実際に動かしてみると、下記のようになります。

Vue.jsのv-forでユーザー一覧作成

v-forでオブジェクトの配列を使う（Composition API)

先ほどと同じように、同上の処理をComposition APIを使って書いた場合は下記のようになります。

<template>
  <div>
    <div class="m-3 w-5/12 bg-white rounded-lg shadow">
      <ul class="divide-y-2 divide-gray-100">
        <li class="p-3 hover:bg-green-100" v-for="user in users" :key="user.id">
          {{ user.name }}さんは、{{ user.age }}歳の{{ user.gender }}性です。
        </li>
      </ul>
    </div>
    <button @click="sortArray" class="rounded border bg-blue-600 py-2 px-3 m-3 text-sm text-white hover:bg-blue-800">
      ソート
    </button>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  setup () {
    const users = ref([{
        id: 1,
        name: '山田',
        age: '22',
        gender: '男',
      },
      {
        id: 2,
        name: '鈴木',
        age: '23',
        gender: '男',
      },
      {
        id: 3,
        name: '佐藤',
        age: '21',
        gender: '女',
      },
    ])

    const sortArray = () => {
      users.value.sort((a, b) => { return b.id - a.id });
    }

    return {
      users,
      sortArray
    }
  }
}
</script>

コメント

タイトルとURLをコピーしました