将数据从刀片模板传递到 vue 时出现 Vue 警告答案

【问题标题】：Vue Warning when passing data from blade template to vue将数据从刀片模板传递到 vue 时出现 Vue 警告
【发布时间】：2020-05-29 06:14:53
【问题描述】：

我从 vue 收到这个错误

[Vue 警告]：属性或方法“product”未在实例上定义，但在渲染期间引用。通过初始化该属性，确保该属性是反应性的，无论是在数据选项中，还是对于基于类的组件。

我不确定我哪里出错了。这是我的代码

主页.vue

<template>
    <div class="container">
        <h1>This is the product page</h1>
    </div>
</template>

<script>
    export default {
        props: ['product'],

        data() {
          return {

          }
        },
        mounted() {
            console.log(this.product);
        }
    }
</script>

这是我的 product.blade.php

<div class="row">
    <div class="col-md-12 mt-5">
        <div id="app">
            <home :product="product"></home>
        </div>
    </div>
</div>

这是在我的 ProductsController 中

public function show(Product $product)
{
    return view('welcome', [
        'product' => $product
    ]);
}

【问题讨论】：

标签： laravel vue.js

【解决方案1】：

<home :product="{{ $product }}"></home>

产品来自您的控制器并在刀片中使用它，您必须使用{{ }}

【讨论】：

非常感谢。我不敢相信我错过了这样的事情。