【Vue3】構造がわからない配列をv-forで表示する

はじめに

ページによって違う表を出したい、でもスタイルは同じにしたいみたいな時に、なんかいい方法はないか調べたところ、

公式ドキュメントに、v-for をオブジェクトに適用する という項目があったので、そちらを参考にしました。

コード

以下のように、各要素が不明なオブジェクト配列を表示したい。

items: [
 {
  ...
 },
 {
  ...
 },
]

公式では、v-for="value in myObject"のようにすると、オブジェクトの各valueが取れるので、やってみます。ここで、itemsはオブkジェクト配列なので、v-forは2重になります。

<template v-for="item in items" :key="item">
  <div v-for="value in item :key ="value">{{ value }}</div>
</template>

これで完成！無事動きました。