Nuxt 可以渲染对象,但不能渲染其属性

问题描述 投票:0回答:1

我正在从 directus API 获取数据,该 API 返回对象数组中的数据,如果我尝试从中放入数组或对象,它会呈现,但当我尝试访问对象的属性时,它不会呈现

 <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>

这是 Berita 内部的内容(对象数组)

[
    {
        "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.&nbsp;</p>\n<p>Acara dibuka langsung Wakil Dekan Bidang Kemitraan, Riset, dan Inovasi Dr. Ir. Rustan Tarakka, ST., M.T., IPM., ASEAN,Eng. dan dihadiri oleh Kepala Program Studi Magister Teknik Sipil Dr. M. Asad Abdurrahman, S.T., M.Eng.PM., Kepala Program Studi Pendidikan Profesi Insinyur&nbsp; Dr. Eng. Ilham Bakri, ST., M.Sc., Wakil Dekan Bidang Kemahasiswaan dan Alumni Prof. Dr. Ir. Adris A. Putra. S.T., M.T dan didampingi oleh dosen dan staf Fakultas Teknik Universitas Halu Oleo.&nbsp;</p>\n<p>Dalam sambutannya, Dr. Rustan menyampaikan selamat datang kembali kepada Delegasi Universitas Halu Oleo, dan berharap semoga dengan adanya benchmarking ini kedua belah pihak bisa saling berdiskusi mengenai Pembukaan Program Studi Magister Teknik Sipil dan Program Studi Pendidikan Profesi Insinyur.&nbsp;</p>\n<p>Sedangkan Prof Adris dalam kesempatan ini menyampaikan apresiasi kepada Fakultas Teknik Universitas Hasanuddin yang telah menerima delegasi Fakultas Teknik Universitas Halu Oleo. Kunjungan ini dalam rangka pembukaan Program Studi Magister Teknik Sipil dan Program Studi Pendidikan Profesi Insinyur,sehingga membutuhkan sumber daya manusia yang sesuai dengan bidangnya. Prof Adris juga menyampaikan bahwa alasan Universitas Halu Oleo memilih Universitas Hasanuddin untuk melaksanakan Benchmarking karena melihat hampir lebih dari setengah dosen di Fakultas Teknik Universitas Halu Oleo adalah alumni dari Universitas Hasanuddin.</p>\n<p>Setelah pembukaan, Benchmarking ini dilanjutkan dengan sharing session untuk mendiskusikan dan menjelaskan bagaimana pembukaan Program Magister Teknik Sipil dan Program Studi Pendidikan Profesi Insinyur.</p>",
        "cover": "b3653d1c-201d-45bc-8b4c-000b5d09af6e"
    },
    {
        "id": "30d4a1bf-fba0-46ae-8862-2f5b5bb2d1f7",
        "sort": null,
        "user_created": "a4655746-7c37-4b7d-9739-8e0d85d6503a",
        "date_created": "2023-11-15T08:38:15.496Z",
        "Title": "Fakultas Teknik Gelar Sosialisasi Penginputan RKAT Tahun 2024",
        "Slug": "fakultas-teknik-gelar-sosialisasi-penginputan-rkat-tahun-2024",
        "Konten": "<p>Fakultas Teknik Universitas Hasanuddin laksanakan Sosialisasi Rencana Kerja dan Anggaran Tahunan Tahun 2024. Sosialisasi ini dilaksanakan pada Rabu, 8 November 2023 di Exhibition Hall Gedung CoT fakultas Teknik Universitas Hasanuddin.</p>\n<p>Sosialisasi ini dibuka langsung oleh Dekan Fakultas Teknik Universitas Hasanuddin Prof. Dr. Eng. Ir. Muhammad Isran Ramli, S.T., M.T., IPM., AER. Setelah sambutan dilanjutkan dengan acara inti yaitu Sosialisasi Penginputan RKAT yang dibawakan oleh Wakil Dekan Bidang Perencanaan, Sumber Daya, dan Alumni Dr. Eng. Ir. Muhammad Rusman, M.T. dan Dr. Ir. M. Yahya, ST., M.Eng selaku &nbsp;Direktur Perencanaan dan Pengembangan Universitas Hasanuddin.&nbsp;</p>\n<p>Setelah Presentasi Sosialisasi yang dilakukan Dr. Rusman dan Dr. Yahya, Acara ini dilanjutkan dengan penyerahan alokasi pagu tahun 2024 Kepala Departemen Se- Fakultas Teknik Universitas Hasanuddin.&nbsp;</p>",
        "cover": "7d5d334c-bbd0-44b0-8853-cf95f9fe1275"
    },
    {
        "id": "f972c425-7b5d-4376-bc39-1b17e0c75ab0",
        "sort": null,
        "user_created": "a4655746-7c37-4b7d-9739-8e0d85d6503a",
        "date_created": "2023-11-15T15:17:02.968Z",
        "Title": "Fakultas Teknik Universitas Hasanuddin Laksanakan Sosialisasi Panduan Penelitian dan Pengabdian Masyarakat Tahun 2024",
        "Slug": "fakultas-teknik-universitas-hasanuddin-laksanakan-sosialisasi-panduan-penelitian-dan-pengabdian-masyarakat-tahun-2024",
        "Konten": "<p>Memasuki akhir tahun 2023 Fakultas Teknik Universitas Hasanuddin menggelar Sosialisasi Panduan Penelitian dan Pengabdian Kepada Masyarakat Tahun 2024. Sosialisasi ini dilaksanakan Selasa, 7 November 2023 di Gedung CSA LT1, Fakultas Teknik Universitas Hasanuddin, Gowa.&nbsp;</p>\n<p>Acara ini dihadiri oleh Sekretaris Lembaga Penelitian dan Pengabdian Masyarakat Universitas Hasanuddin Ir. Suharman Hamzah, ST., MT., Ph.D(Eng)., HSE, Wakil Dekan Bidang Kemitraan, Riset, dan Inovasi Dr. Ir. Rustan Tarakka, S.T., M.T., IPM., AER, Kepala Departemen dan Dosen Di Fakultas Teknik Universitas Hasanuddin.&nbsp;</p>\n<p>Sosialisasi ini bertujuan untuk memperkenalkan panduan penelitian dan pengabdian masyarakat yang akan digunakan untuk tahun 2024 kedepan. Untuk itu sosialisasi ini menghadirkan dua pemateri yaitu Prof. Dr. Moh Ivan, Az., M.Sc., dan Prof. Dr. Ir. Jasmal Ahmari Syamsu, M.Si., IPU, AER.</p>",
        "cover": "38cb8ef9-aca8-465e-ac9d-7ef0901e6cfa"
    },
    {
        "id": "96e815b7-e2fc-4862-a414-497492aeba55",
        "sort": null,
        "user_created": "a4655746-7c37-4b7d-9739-8e0d85d6503a",
        "date_created": "2023-11-15T15:23:46.794Z",
        "Title": "Sambut Dosen UGM dan ITS, Departemen Teknik Kelautan Universitas Hasanuddin Gelar Kuliah Tamu.",
        "Slug": "sambut-dosen-ugm-dan-its-departemen-teknik-kelautan-universitas-hasanuddin-gelar-kuliah-tamu",
        "Konten": "<p>Dalam rangka Seminar Nasional Sains dan Teknologi Kelautan 2023, Departemen Teknik Kelautan Universitas Hasanuddin mengundang narasumber dari Universitas Gadjah Mada dan Institut Teknologi Sepuluh November. Hal ini juga dimanfaatkan untuk melaksanakan Guest Lecturer atau Kuliah Tamu. Kuliah Tamu ini dilaksanakan pada Kamis, 2 November 2023 di Ruang LT1 Gedung CSA Fakultas Teknik Universitas Hasanuddin, Gowa.&nbsp;</p>\n<p>Kuliah tamu ini menghadirkan dua materi, materi pertama adalah Coastal dan Marine Hazard yang dibawakan oleh Dr. Ir. Wahyudi, M.Sc. Dosen Teknik Kelautan Institut Teknologi Sepuluh November. Kemudian materi kedua yaitu Pengenalan Software SWAN dan INTERPOL yang dibawakan oleh Prof. Ir. Radianta Triatmadja, Ph.D, Dosen Teknik Sipil dan Lingkungan Universitas Gadjah Mada.</p>\n<p>Kuliah tamu ini juga dihadiri oleh Kepala Departemen Teknik Kelautan Universitas Hasanuddin Dr. Ir. Chairul Paotonan, ST., MT., Sekretaris Departemen Dr. Hasdinar Umar, S.T., M.T. Dan diikuti oleh seluruh Tendik, Dosen dan Mahasiswa Departemen Teknik Kelautan Universitas Hasanuddin</p>",
        "cover": "5fe64dc6-4627-4e3c-8abc-08cba328c64e"
    }
]
javascript vue.js nuxt.js
1个回答
0
投票

只有极少数情况会导致此问题,大部分是由于您造成的:

  1. fetch
    调用是
    Promise
    所以肯定它最初是
    undefined
    并且我们与它无关让我们使用:
  <a href="#">{{ Berita?.[0].Title }}</a>
  1. 一种罕见的情况是,您使用
    RefLike
    会导致
    vue
    无法解析反应物,此时添加后缀
    .value
    将解决该问题:
  <a href="#">{{ Berita.value?.[0].Title }}</a>
© www.soinside.com 2019 - 2024. All rights reserved.