如何将 Laravel 数据(json)传递给 Vue 组件

Posted

技术标签:

【中文标题】如何将 Laravel 数据(json)传递给 Vue 组件【英文标题】:How to pass Laravel data(json) to Vue component 【发布时间】:2017-12-25 09:06:02 【问题描述】:

我想将一个 Laravel 对象传递给我的 Vue 组件。在 Vue 中,我想将数据解析为 JSON 对象,我已经尝试过 this solution。

在我的刀片中,我有这个:

<creator :object="parseData( $object->toJson() )"></creator>

在我的组件中,我有这个:

data() 
    return 
        object: null
    
,
methods: 
    parseData(data) 
        this.object= JSON.parse(data);
    

我也试过

props: ['object']

而不是数据()

这给了我以下错误:

[Vue warn]: Property or method "parseData" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

你能告诉我我做错了什么吗?

已解决 我今天又试了一次,由于某种原因它起作用了。谢谢你们的时间!

【问题讨论】:

【参考方案1】:

首先:您没有将属性object 添加到您的组件中。要解决此问题,您必须添加此行

props: ['object'],

就在您的 data 函数之前。

第二:您必须在组件的methods 部分定义parseData 函数。修复如下:

methods: 
    parseData () 
        //your function logic
    

Vue 需要在适当的部分中定义方法、观察者、计算属性。

现在您的代码已经开始竞争了。

【讨论】:

哦,我忘了在 *** 中写下方法部分,但我的代码中已经正确了。无论哪种方式,我都尝试使用 props: ['object'] 或 data() return object: null 我得到了同样的错误【参考方案2】:

您的parseData 方法需要在您的JS 的methods 部分中定义。

试试:

data() 
    return 
        ball: null
    
,

methods: 
   parseData(data) 
      this.object= JSON.parse(data);
   

编辑:按照@Piotr 所说的去做:)

【讨论】:

感谢您的提及,我的代码中已经有这个,只是忘了在***中正确地写它。所以错误还是一样的

以上是关于如何将 Laravel 数据(json)传递给 Vue 组件的主要内容,如果未能解决你的问题,请参考以下文章

Laravel 将 json 传递给 vue.js

将变量传递给按钮 vue js laravel

Vue.js - 如何将 prop 作为 json 数组传递并在子组件中正确使用?

如何使用 vform 将对象数组传递给 laravel

将刀片文件中的数据直接传递给 Vue 实例

如何使用 laravel 将多维数组传递给 API