Cannot iterate through list of items v-for , useAsyncData
<script setup lang="ts">
import type { Monster } from "~/types/dnd5e/monsters";
const { data: listOfItems } = await useAsyncData<Monster[]>('listOfItems', () => $fetch(
/api/dnd5e/monsters,
{
method: "get",
}
));
console.log('monstersList', listOfItems)
</script>
<template>
<div>
<div v-for="item in listOfItems" :key="item.index">
{{ item.name }}
</div>
</div>
</template>
Sorry in advance, I am quite new to Nuxt.
If I am using useAsyncData it returns globalThis.Ref<Monster[] | null> , and if I am trying to access object item I get undefined , if I iterate through items I don't see any names on page.
But with $fetch without useAsyncData it works fine.
Am I incorrectly iterating through ref object?
Added attachment to show that listOfItems is not empty.
2 Replies
from what I see from the console, the key with the data is monstersList so you should use listOfItems.monstersList
Thank you , that worked👍