Question

我正在尝试让Vue组件在Laravel 5.3中运行，我想将数据从我的刀片模板传递到Vue组件。

但是我收到了一个错误，到目前为止我找到的答案都没有。

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

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

在我的例子中，我有：

<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>

Vue组件确实加载，但它不显示testinfo，它会生成此错误消息：

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

Answer 1

引用了您的错误 - ＆gt; 财产或方法＆＃34; someinfo＆＃34;未在实例上定义，但在呈现期间引用。确保在数据选项中声明反应数据属性。（在根实例中找到）

这意味着未从您的vue父级声明someinfo模型。它应该包含在数据{someinfo：null}中，并从那里提供数据并在组件示例中传递它。

关于从vue blade传递数据。你应该从你的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) 
    }
}
}

您需要从控制器进行sperate ajax调用以实现从控制器获取您的信息。在ajax调用成功然后将响应放到你的vue模型之后，由于双向绑定，它会自动重新传递给你的组件。

Answer 2

来自Tony Fale的答案并非我正在寻找的答案，但它确实给了我一些帮助我想出答案的线索。

在此代码中：

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

我想＆＃34; someinfo＆＃34;只会被视为字符串，但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>

它按预期工作。

无法将数据从刀片传递到vue（Laravel 5.3）

2 个答案: