在Vue.js 3中从Laravel API获取关联数据及循环展示问题求助

一、修复现有 Options API 代码 #

你当前代码存在 <script setup> 与传统 Options API 混合的问题，先修正结构，再正确访问嵌套的 get_item_cards 数据：

修正后的脚本代码 #

<script>
import axios from 'axios'

export default {
    name: 'ListNotes',
    data() {
        return {
            cardNotes: [],
        }
    },
    mounted() {
        this.getListNotes();
    },
    methods: {
        getListNotes() {
            axios.get('http://localhost:8000/api/card')
                .then(res => {
                    this.cardNotes = res.data.cardNotes;
                    // 打印第一个条目关联数据，验证是否存在
                    console.log(this.cardNotes[0]?.get_item_cards); 
                })
                .catch(err => console.error('请求失败:', err));
        }
    }
}
</script>

模板中循环关联数据 #

通过嵌套循环访问 get_item_cards，同时添加空值校验避免报错：

<template>
    <div class="card-notes-container">
        <!-- 循环主数据 -->
        <div v-for="note in cardNotes" :key="note.id" class="card-note">
            <h4>{{ note.title }}</h4>
            <!-- 循环关联的 get_item_cards 数据 -->
            <div v-if="note.get_item_cards && note.get_item_cards.length" class="item-cards">
                <p>关联卡片：</p>
                <div v-for="item in note.get_item_cards" :key="item.id" class="item-card">
                    <span>{{ item.name }}</span>
                </div>
            </div>
            <p v-else>无关联卡片</p>
        </div>
    </div>
</template>

二、Vue 3 推荐的 Composition API 写法 #

新项目建议使用 <script setup> 语法的 Composition API，更贴合 Vue 3 设计理念：

脚本代码 #

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

// 响应式数据
const cardNotes = ref([])

// 获取数据函数
const getListNotes = async () => {
    try {
        const res = await axios.get('http://localhost:8000/api/card')
        cardNotes.value = res.data.cardNotes
        console.log(cardNotes.value[0]?.get_item_cards)
    } catch (err) {
        console.error('数据请求失败:', err)
    }
}

// 页面挂载时调用
onMounted(() => {
    getListNotes()
})
</script>

模板代码 #

模板层的循环逻辑和空值校验与 Options API 一致，无需修改。

三、关键注意事项 #

• 确认 Laravel API 数据结构：确保后端返回的每个 cardNotes 条目都包含 get_item_cards 字段，建议在 Laravel 控制器中使用预加载（with('get_item_cards')）避免 N+1 查询，同时确保关联关系定义正确。
• 空值校验：使用 v-if="note.get_item_cards && note.get_item_cards.length" 或可选链操作符（?.），避免因关联数据为空导致渲染报错。
• 错误处理：添加 catch 块捕获请求异常，便于排查问题。

内容的提问来源于stack exchange，提问作者Pandu Prihandoko