如何将 Laravel 数据（json）传递给 Vue 组件答案

【问题标题】：How to pass Laravel data(json) to Vue component如何将 Laravel 数据（json）传递给 Vue 组件
【发布时间】：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.

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

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

【问题讨论】：

标签： json laravel parsing vue.js

【解决方案1】：

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

props: ['object'],

就在您的 data 函数之前。

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

methods: {
    parseData () {
        //your function logic
    }
}

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

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

【讨论】：

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

【解决方案2】：

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

试试：

data() {
    return {
        ball: null
    }
},

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

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

【讨论】：

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