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

【问题标题】：Can't pass data from blade to vue (Laravel 5.3)无法将数据从刀片传递到 vue（Laravel 5.3）
【发布时间】：2017-07-27 01:53:46
【问题描述】：

我正在尝试让 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>

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

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

【问题讨论】：

标签： laravel-5 vue.js vue-component

【解决方案1】：

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

这意味着 someinfo 模型不是从您的 vue 父级声明的。它应该被包装在 data { 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) 
    }
}
}

您需要来自控制器的单独 ajax 调用来实现从控制器获取您的信息。在 ajax 调用成功之后，是时候将响应放入您的 vue 模型，然后由于两种方式绑定，它将自动重新主动传递给您的组件。

【讨论】：

【解决方案2】：

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

在这段代码中：

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

它按预期工作。

【讨论】：