Laravel blade向Vue组件传值时报Missing required prop: "id"错误怎么解决？

AI 小北

2026-10-6

排查及解决方法

第一步：检查后端到Blade的变量传递
先确认控制器是否正确将$product_id变量传递到当前Blade视图，你可以直接在Blade文件里加一行{{ dd($product_id) }}临时测试，如果输出为空说明问题出在后端传值环节，需要先修正后端逻辑。
第二步：查看Blade渲染后的实际HTML
页面加载后右键查看网页源码，找到add-product组件标签，确认渲染后的属性是否符合预期：如果你传递的是数值ID，正确渲染结果应该是<add-product :id="你的实际产品ID"></add-product>，如果:id属性值为空，说明$product_id在Blade渲染时就没有值。

第三步：修正Vue组件的props声明
你当前的props未指定接收类型，Vue隐式校验可能会识别失败，补充类型声明兼容数值和字符串格式的ID：

export default {
    props:{
        id:{
            type: [Number, String],
            required : true
        }
    },
    mounted() {
        console.log(this.id)
    },
}

第四步：调整Blade传值写法（针对字符串格式ID）
如果你的ID是包含字母的字符串格式，原有写法会让Vue把渲染出来的ID值识别为实例变量而非字符串，导致取值失败，可以改成两种写法：
1. v-bind写法加一层单引号包裹：
```
<div id="add_product">
   <add-product :id="'{{$product_id}}'"></add-product>
</div>
```
1. 不使用v-bind，直接写静态属性：
```
<div id="add_product">
   <add-product id="{{$product_id}}"></add-product>
</div>
```
第五步：确认Vue实例挂载正确
检查Vue实例的挂载节点是否为#add_product，组件的全局/局部注册名称是否和add-product完全一致，没有大小写拼写错误。