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

Posted 2023-02-23

【中文标题】无法将数据从刀片传递到 vue（Laravel 5.3）

【英文标题】：Can't pass data from blade to 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”未在实例上定义，但 在渲染期间引用。确保声明反应数据 数据选项中的属性。 （在根实例中找到）

【参考方案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>

它按预期工作。