How to pass Laravel data(json) to Vue component

Question

I want to pass an Laravel object to my Vue component. In Vue I want to parse the data to an JSON object and I already tried this solution .

In my blade I have this:

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

And in my component I have this:

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

I also tried

props: ['object']

instead of data()

This gives me the following error:

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

Can you tell me what I am doing wrong?

SOLVED I tried it again today and for some reason it worked. Thanks for your time guys!

Answer 1

First: You didn't add property object to your component. To fix this you have to add this line

props: ['object'],

just before your data function.

Second: you have to define parseData function in methods part of your component. Fix it as follows:

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

Vue needs to define methods, watchers, computed properties within proper section.

Now your code is compete.

Answer 2

Your parseData method needs to be defined within the methods section of your JS.

Try:

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

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

Edit: and do what @Piotr said :)