Mapでのv-for

date

Mar 11, 2023

repo_url

slug

vfor-map

status

Published

summary

type

Post

thumbnail_url

Mapをループさせる場合のv-forディレクティブ

v-for="[各要素のキーを格納する変数, 各要素の値を格納する変数] in ループ対象"

エイリアス部分がブラケット[]になっていることが注意点。

以下のようにMapを利用できる。

<script setup lang="ts">
import { ref } from 'vue';

const cocktailListInit = new Map<number, string>();
cocktailListInit.set(2345, 'ホワイトレディ');
cocktailListInit.set(4412, 'ブルーハワイ');
cocktailListInit.set(6792, 'ニューヨーク');
const cocktailList = ref(cocktailListInit);
</script>

<template>
  <ul>
    <li v-for="[id, cocktailName] in cocktailList" v-bind:key="id">
      IDが{{ id }}のカクテルは{{ cocktailName }}
    </li>
  </ul>
</template>

Mapのメリット

Mapを利用することでキーとしてid値を使用できるため、管理がしやすくなる。

例として。get()メソッドで値を取りたい場合に、キーを指定するたけですぐに取り出せる。

下記コードの場合、

cocktailDataListInit.get(4412);

で、ブルーハワイのオブジェクトが取得できる。

Mapではなく配列の場合はもっと複雑なコードが必要となる。

<script setup lang="ts">
import {ref} from "vue";

const cocktailDataListInit = new Map<number, Cocktail>();
cocktailDataListInit.set(2345, {id: 2345, name: "ホワイトレディ", price: 1200});
cocktailDataListInit.set(4412, {id: 4412, name: "ブルーハワイ", price: 1500});
cocktailDataListInit.set(6792, {id: 6792, name: "ニューヨーク", price: 1100});
const cocktailDataList = ref(cocktailDataListInit);

interface Cocktail {
	id: number;
	name: string;
	price: number;
}
</script>

<template>
	<ul>
		<li
			v-for="[id, cocktailItem] in cocktailDataList"
			v-bind:key="id">
			{{cocktailItem.name}}の値段は{{cocktailItem.price}}円
		</li>
	</ul>
</template>