Vue 3 集成 Laravel 时Props（gunplaId）始终返回null的解决求助

点击收藏（Collection）或心愿单（Wishlist）按钮时，期望通过props中的ID发起Axios请求，但控制台始终显示gunplaId为null，请求负载里也是null。相关代码如下：

Blade 循环代码 #

@foreach($gunplas as $gunpla)    
<div id="app{{$loop->index}}">
    <app :gunpla-id="{{ $gunpla->id }}" :csrf-token="'{{ csrf_token() }}'">
    </app>
</div>
@endforeach

App.vue 代码 #

<template>
    <div>
        <collection-button :in-collection="inCollection" :gunpla-id="gunplaId" @toggle-collection="toggleCollection"></collection-button>
        <wishlist-button :in-wishlist="inWishlist" :gunpla-id="gunplaId" @toggle-wishlist="toggleWishlist"></wishlist-button>
    </div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';
import CollectionButton from './components/CollectionButton.vue';
import WishlistButton from './components/WishlistButton.vue';

export default {
    components: {
        CollectionButton,
        WishlistButton
    },
    props: ['gunplaId', 'csrfToken'],
    setup(props) {
        const inCollection = ref(false);
        const inWishlist = ref(false);
        const toggleCollection = () => {
            console.log('gunplaId:', props.gunplaId);
            axios.post('/toggle-collection.html', { gunplaId: props.gunplaId }, {
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': props.csrfToken
                }
            })
            .then(response => {
                console.log(response.data);
            })
            .catch(error => {
                console.error(error);
            });
        };

        const toggleWishlist = () => {
            axios.post('/toggle-wishlist.html', { gunplaId: props.gunplaId }, {
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': props.csrfToken
                }
            })
            .then(response => {
                console.log(response.data);
            })
            .catch(error => {
                console.error(error);
            });
        };

        return {
            inCollection,
            inWishlist,
            toggleCollection,
            toggleWishlist
        };
    }
}
</script>

1. 修正Blade中props的绑定方式 #

确保Vue能正确识别gunpla-id的数值类型，同时修正csrf-token的字符串传递逻辑：

@foreach($gunplas as $gunpla)    
<div id="app{{$loop->index}}">
    <!-- 直接传递数值，Vue自动识别为Number类型 -->
    <app :gunpla-id="{{ $gunpla->id }}" :csrf-token="`{{ csrf_token() }}`">
    </app>
</div>
@endforeach

2. 完善Vue的props定义（添加类型校验） #

在App.vue的props中明确类型和必填项，Vue会在控制台输出警告，快速定位问题：

props: {
    gunplaId: {
        type: Number,
        required: true,
        default: null
    },
    csrfToken: {
        type: String,
        required: true,
        default: ''
    }
},

3. 确认Vue实例的挂载逻辑正确 #

如果是手动挂载多个Vue实例，要确保每个#app{{$loop->index}}都被正确挂载：

document.querySelectorAll('[id^="app"]').forEach(el => {
    createApp(App).mount(el);
});

挂载逻辑错误会导致Vue实例无法接收props，直接造成gunplaId为null。

4. 检查子组件的props传递（可选） #

如果CollectionButton和WishlistButton也用到gunplaId，要确认子组件的props定义正确：

// CollectionButton.vue示例
export default {
    props: {
        inCollection: Boolean,
        gunplaId: {
            type: Number,
            required: true
        }
    },
    // ...其他逻辑
}

5. 调试验证 #

修改后刷新页面，打开控制台：

• 查看是否有Vue的props警告，根据提示修正
• 在toggleCollection中添加console.log(props)，查看完整props对象，确认gunplaId是否存在

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