【Vue】v-forで配列を指定回数だけループさせて出力させる

環境

Vue２

はじめに

今回はVue.jsの記事になります。案件の中で要素を最初の2件だけ表示させてほしいというご要望をいただきました。メソッドを使い配列フィルタリングしたりといろいろな方法を試したので書き留めておこうと思います。

v-forについて

v-forディレクティブの使い方

v-forはいわゆるfor分の役割を持ちます。
HTMLタグの属性にv-for="要素(命名は自由) in 定義した配列"を定義

index.vue

<div id="app">
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>

v-forは２つ目の引数にindexを取れる

以下の様に第２引数を指定することによって、indexを取ることができます。indexの名前は自由につけてOK

index.vue

<div id="app">
  <ul>
    <li v-for="(item, index) in items">{{ item }}</li>
  </ul>
</div>

:keyを設定する

:key=””で各要素を一意に識別するためのkey属性を設定する。
ここでkey属性を設定しないとエラーが吐き出されます。

Elements in iteration expect to have 'v-bind:key' directives

index.vue

<div id="app">
  <ul>
    <li v-for="(item, index) in items" :key="item">{{ item }}</li>
  </ul>
</div>

今回のコード

index.vue

<template>
  <div id="app">
    <ul>
      <li v-for="member in memberis" :key="member.id">
        {{ member.id}}-{{ member.name }}
        <p>
          保有スキル：<span v-for="skile in member.skiles" :key="skile.id">{{ skile.label }}</span>
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      memberis: [
        { id: 1, name: "鈴木", skiles: [
            { id: 1, label: "PHP" }, 
            { id: 2, label: "Ruby" }, 
            { id: 3, label: "Vue" },
            { id: 4, label: "JavaScript" }
          ] 
        },
        { id: 2, name: "田中", skiles: [
            { id: 1, label: "Java"}, 
            { id: 2, label: "AWS"}, 
            { id: 3, label: "JavaScript"},
            { id: 4, label: "GCP" },
            { id: 5, label: "PHP" }
          ] 
        },
        { id: 3, name: "佐藤", skiles: [
            { id: 1, label: "React"}, 
            { id: 2, label: "Ruby"}, 
            {id: 3, label: "Laravel"}
          ] 
        },
      ]
    };
  },
};
</script>
<style>
  ul {
    list-style : none;
  }
  li {
    margin: 10px;
    padding: 10px;
    border: 1px solid #000;
  }
  span {
    margin: 5px;
  }
</style>

さっそく修正していきます

修正内容は、保有スキルの表示を２つにして欲しいというものです。
いろいろと調べてみた結果

• 配列をフィルタリングした後にv-forでループさせれる
• v-forとv-ifを組み合わせる

上記2点の記事が多くでてきました。
今回は前者の配列をフィルタリングする方法を使って修正していきます。

実装

今回は配列が入れ子構造になっているので、親をv-forで回しつつスキルのv-forでフィルタリングをさせる実装になります。

コード

index.vue

<template>
  <div id="app">
    <ul>
      <li v-for="member in memberis" :key="member.id">
        {{ member.id}}-{{ member.name }}
　　　　　<!-- フィルタリングメソッドを追加 -->
        <p>
          保有スキル：<span v-for="skile in limitCount(member.skiles)" :key="skile.id">{{ skile.label }}</span>
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      memberis: [
        { id: 1, name: "鈴木", skiles: [
            { id: 1, label: "PHP" }, 
            { id: 2, label: "Ruby" }, 
            { id: 3, label: "Vue" },
            { id: 4, label: "JavaScript" }
          ] 
        },
        { id: 2, name: "田中", skiles: [
            { id: 1, label: "Java"}, 
            { id: 2, label: "AWS"}, 
            { id: 3, label: "JavaScript"},
            { id: 4, label: "GCP" },
            { id: 5, label: "PHP" }
          ] 
        },
        { id: 3, name: "佐藤", skiles: [
            { id: 1, label: "React"}, 
            { id: 2, label: "Ruby"}, 
            {id: 3, label: "Laravel"}
          ] 
        },
      ]
    };
  },
  // フィルタリングするメソッドを追加
  methods: {
    limitCount (lists) {
      return lists.slice(0, 2)
    }
  }
};
</script>
<style>
  ul {
    list-style : none;
  }
  li {
    margin: 10px;
    padding: 10px;
    border: 1px solid #000;
  }
  span {
    margin: 5px;
  }
</style>

実装内容

文字列や配列などからデータの一部分だけ取り出せるメソッsliceを使ってメソッドを定義します。
第一引数に開始位置、第二引数に終了位置を指定します。今回は表示させたい値は最初の２つなので開始位置0、終了位置2を指定しています。
こうすることで表示させたい数の変更も簡単にできます。

後は、フィルタリングしたい配列を指定してメソッドを呼び出せば完了です。

今回は以上となります。