Nuxt可渲染对象数组及对象，但无法渲染对象属性的技术问题

问题原因 #

组件初始渲染时，Berita数组还未从Directus API加载完成，此时直接访问Berita[0].Title会因Berita[0]为undefined导致渲染失败。尽管后续数据加载完成后数组和单个对象能正常显示，但初始渲染的错误会阻止属性内容的渲染。

解决方案 #

1. 使用可选链操作符（推荐） #

直接修改模板中的插值，添加可选链避免空值报错：

<h3 class="text-black text-justify text-l font-bold py-4">
  <a href="#">{{ Berita?.[0]?.Title }}</a>
</h3>

可选链?.会在左侧值为undefined或null时停止访问，不会抛出错误，等数据加载完成后自动渲染内容。

2. 添加存在性判断 #

在包含插值的元素上通过v-if确保数据存在后再渲染：

<h3 class="text-black text-justify text-l font-bold py-4" v-if="Berita && Berita.length > 0">
  <a href="#">{{ Berita[0].Title }}</a>
</h3>

3. 初始化默认值 #

在组件中给Berita初始化空数组，保证它始终是数组类型，避免初始状态为undefined：

• Options API：

export default {
  data() {
    return {
      Berita: []
    }
  },
  async mounted() {
    // 替换为你的Directus API请求逻辑
    const response = await fetch('https://your-directus-api/items/berita')
    const result = await response.json()
    this.Berita = result.data // 注意Directus返回的结构可能包含data字段，需根据实际调整
  }
}

• Composition API（Nuxt 3）：

<script setup>
import { ref, onMounted } from 'vue'

const Berita = ref([])

async function fetchBerita() {
  const response = await fetch('https://your-directus-api/items/berita')
  const result = await response.json()
  Berita.value = result.data // 根据Directus实际返回结构调整
}

onMounted(fetchBerita)
</script>

4. 使用Nuxt专属数据获取方法 #

利用Nuxt的useAsyncData确保数据在组件渲染前加载完成，同时自动处理响应式和缓存：

<script setup>
const { data: Berita } = await useAsyncData('berita', async () => {
  const response = await $fetch('https://your-directus-api/items/berita')
  return response.data // 根据Directus实际返回结构调整
})
</script>

内容的提问来源于stack exchange，提问作者Randy Tunru