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

Question

我想将一个值从 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

已编辑：

Answer 1

试试

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

id 没有:。

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