【Nuxt3】v-forをネストして、多次元配列を表示（自分記録用）

はじめに

各セクションのタイトルと、文章を繰り返しすために、v-forを使っていたら、
TypeScriptで、property 'b' does not exist on type '{a: string, b: { name: string, value: string; }[]; }[] のts2339エラーが出てきました。

修正前

どうやら、item.b.nameのように、配列内のプロパティに直接アクセスすることはできないようです。

<template v-for="(item, index) in items" :key="index">
 <h1 class="title">{{ item.a }}</h1>
 <div class="">
   <div>{{ item.b.name }}</div> // ここでエラー発生
   <div>{{ item.b.value }}</div> // ここでエラー発生
 </div>
</template>

解決策

下のように、v-forをネストしたところ、無事タイトルも本文も表示されました！

<template v-for="(item, index) in items" :key="index">
 <h1 class="title">{{ item.a }}</h1>
 <div class="">
 <template v-for="(item, index) in item.b" :key="index"></template>
   <div>{{ item.name }}</div> 
   <div>{{ item.value }}</div>
 </div>
</template>