I am using a directus API to fetch data, which is returned in an array of objects. I can render the array or an object from it, but not when trying to access a property of the object
<template>
<div class="grid grid-cols-2 gap-6 mt-6">
<div class="flex justify-center items-center">
<div class="flex flex-col items-stretch w-full">
<img loading="lazy" src="@/assets/images/berita-1.png" class="aspect-[1.7] object-fit-cover object-center max-w-[580] overflow-hidden max-w-full" />
<h3 class="text-black text-justify text-l font-bold py-4">
<a href="#">{{ Berita[0].Title }}</a>
</h3>
<p class="line-clamp-2 text-justify text-black">
Departemen Teknik Industri Fakultas Teknik Universitas Hasanuddin menggelar
International Guest Lecturer yang dibawakan oleh Profesor yang juga sebagai
Head Of Laboratory Ergonomics for All Ages and Abilities dari Kyushu
University Prof. Satoshi Muraki, Ph.D., CPE. International Guest Lecturer
dilaksanakan pada Senin 9, Oktober 2023 dan dilaksanakan secara daring dan
luring di Gedung CSA LT 1 Fakultas Teknik Universitas Hasanuddin.
</p>
</div>
</div>
</div>
</template>
Here is what's inside Berita (an array of objects)
[
{
"id": "8f790756-54e2-43fe-8a23-5aa49277a9af",
"sort": null,
"user_created": "a4655746-7c37-4b7d-9739-8e0d85d6503a",
"date_created": "2023-11-09T01:11:13.228Z",
"Title": "Fakultas Teknik Universitas Hasanuddin Terima Kunjungan Benchmarking Universitas Halu Oleo.",
"Slug": "fakultas-teknik-universitas-hasanuddin-terima-kunjungan-benchmarking-universitas-halu-oleo",
"Konten": "<p>Fakultas Teknik Universitas Hasanuddin menerima kunjungan dari Universitas Halu Oleo. Kunjungan ini dilaksanakan dalam rangka Benchmarking Program Studi Magister Teknik Sipil dan Program Studi Pendidikan Profesi Insinyur. Benchmarking tersebut dilaksanakan pada Senin, 6 November 2023 di Ruang Rapat Lantai 3 Gedung CoT Fakultas Teknik Universitas Hasanuddin. </p>\n...
},
{
"id": "30d4a1bf-fba0-46ae-8862-2f5b5bb2d1f7",
"sort": null,
...
},
{...}
]