缺少必需的道具：<AddProduct> 处的“id” - Laravel / Vue

Posted 2023-03-14

【中文标题】缺少必需的道具：<AddProduct> 处的“id” - Laravel / Vue

【英文标题】：Missing required prop: "id" at <AddProduct> - Laravel / Vue

【发布时间】：2021-10-22 21:20:48

【问题描述】：

我想将一个值从 laravel Blade 传递给一个 Vue 组件：

我的 Laravel 刀片：

<div id="add_product">
   <add-product :id="$product_id"></add-product>
</div>

我的 vue 组件：

export default 
    props:
        id:
            required : true
        
    ,
    mounted() 
        console.log(this.id)
    ,

问题是我得到了这个错误：

缺少必需的道具：AddProduct 处的“id”

我花了 4 小时试图找出问题所在，希望您能提供帮助。

回购： https://github.com/SimodevStuff/shopify-add-product-clone

已编辑：

【参考方案1】：

试试

<div id="add_product">
   <add-product id="$product_id"></add-product>
</div>

id 没有:。

在 Vue 中以 : 为前缀的 prop 是 v-bind 的简写。这意味着，您正在将属性绑定到组件。但是你需要传递一个值。

【讨论】：

我确实尝试过，但没有任何改变。 ?

@Forbiden 你可以发布渲染的 html 吗？ （就在上面部分）

@section('content') <div class="container"> <div id="add_product"> <add-product id="$product_id"></add-product> </div> </div> @endsection

@Forbiden 在浏览器中呈现

我用它的截图编辑了帖子。