Laravel 5 Can'；将数据从刀片传送到vue（Laravel 5.3）

我试图让Vue组件在Laravel 5.3中工作，我想将数据从我的刀片模板传递到Vue组件

但我发现了一个错误，到目前为止，我找到的答案都不起作用

我正在使用新安装的示例组件。在我的刀片模板中，我有：

<example :testinfo="someinfo"></example>

在我的Example.vue中，我有：

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Example Component</div>

                    <div class="panel-body">
                        {{testinfo}} I'm an example component!
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['testinfo'],
        mounted() {
            console.log('Component ready.')
        }
    }
</script>

示例组件
{{testinfo}}我是一个示例组件！
导出默认值{
道具：['testinfo']，
安装的（）{
console.log（'组件就绪'）
}
}

Vue组件确实加载，但不显示testinfo，并生成以下错误消息：

实例上未定义属性或方法“someinfo”，但 在渲染期间引用。确保声明被动数据 数据选项中的属性。（在根实例中找到）

---

引用您的错误-> 属性或方法“someinfo”未在实例上定义，但在渲染期间被引用。确保在数据选项中声明反应数据属性。（在根实例中找到）

这意味着未从vue父级声明someinfo模型。它应该包装在数据{someinfo:null}中，然后从那里向他提供数据并将其传递到组件示例中

关于从vue刀片服务器传递数据。您应该从vue方法调用ajax，如

Vue new(){
data : { someinfo : null },
ready :function() / mounted() vue2
{
this.getSomeInfo();
}
methods : {
    getSomeInfo : function(){
    var self = this;
    your ajax request here then 
    self .someinfo = (your ajax.response) 
    }
}
}

您需要一个来自controller的sperateajax调用来实现从controller获取信息。

---

ajax调用成功后，需要将响应放入您的vue模型，然后由于双向绑定，它将自动重新主动传递给您的组件。

参考您的错误-> 属性或方法“someinfo”未在实例上定义，但在渲染期间被引用。确保在数据选项中声明反应数据属性。（在根实例中找到）

这意味着未从vue父级声明someinfo模型。它应该包装在数据{someinfo:null}中，然后从那里向他提供数据并将其传递到组件示例中

关于从vue刀片服务器传递数据。您应该从vue方法调用ajax，如

Vue new(){
data : { someinfo : null },
ready :function() / mounted() vue2
{
this.getSomeInfo();
}
methods : {
    getSomeInfo : function(){
    var self = this;
    your ajax request here then 
    self .someinfo = (your ajax.response) 
    }
}
}

您需要一个来自controller的sperateajax调用来实现从controller获取信息。 ajax调用成功后，是时候将响应放入您的vue模型中了，然后由于双向绑定，它将自动重新传递到您的组件。

的答案并不完全是我想要的，但它确实给了我一条线索，帮助我思考答案

在此代码中：

<example :testinfo="someinfo"></example>

我原以为“someinfo”会被当作一个字符串，但Vue会把它当作一个JavaScript变量。由于someinfo没有在任何地方定义，因此会导致错误

如果我这样做：

<example :testinfo="{somekey: 'someinfo'}"></example>

并将Example.vue更改为：

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Example Component</div>

                    <div class="panel-body">
                        {{testinfo.somekey}} I'm an example component!
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

示例组件
{{testinfo.somekey}}我是一个示例组件！

它如预期的那样工作。

的答案并不完全是我想要的，但它确实给了我一个线索，帮助我思考答案

在此代码中：

<example :testinfo="someinfo"></example>

我原以为“someinfo”会被当作一个字符串，但Vue会把它当作一个JavaScript变量。由于someinfo没有在任何地方定义，因此会导致错误

如果我这样做：

<example :testinfo="{somekey: 'someinfo'}"></example>

并将Example.vue更改为：

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Example Component</div>

                    <div class="panel-body">
                        {{testinfo.somekey}} I'm an example component!
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

示例组件
{{testinfo.somekey}}我是一个示例组件！

它按预期工作