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!

Aaron Fahey · Accepted Answer · 2017-07-19 22:57:10Z

1

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

edited Jul 19, 2017 at 22:57

answered Jul 19, 2017 at 22:01

Aaron Fahey

6991 gold badge8 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mmanuel Over a year ago

Thank you for mentioning, I already have this in my Code, just forgot to write it correct in stackoverflow. So the erros is still the same

piotr · Accepted Answer · 2017-07-19 22:59:09Z

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.

edited Jul 19, 2017 at 22:59

answered Jul 19, 2017 at 22:53

piotr

1,2821 gold badge9 silver badges21 bronze badges

1 Comment

mmanuel Over a year ago

Oh I forgot to write down the methods section in stackoverflow, but I already have that correct in my code. Either way I try it with props: ['object'] or data() { return { object: null }} I got the same error

Collectives™ on Stack Overflow

How to pass Laravel data(json) to Vue component

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related