1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

v-forでMapオブジェクトを対象にするケース

Posted at

記述例

sample.vue
<script>
const map = new Map([
  ['key': 'value'],
  ...
]);
</script>
<template>
  <div
    v-for="([k, val],index) of Array.from(map)"
    :key="index"
  >
    {{ k }} / {{ val }}
  </div>
</template>

解説

Array.from(map)

Mapオブジェクトは、配列との互換性があります。
Array.from(map)とすることで、Mapオブジェクトのコンストラクタ(2次元配列)を取得しています。

【参考】Array オブジェクトとの関係

v-for="([k, val],index) of ..."

2次元配列から、要素とindexを取り出しています。
取り出す要素は配列なので、キーと値を角括弧の配列形式で受け取ります。
v-forの中で展開されるので、例のようにkとvalを直接使用できます。

indexは無くても可能ですが、keyディレクティブの設定は忘れずに。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?