Level 3
Can we see some screenshots of the Vue error
Jun 19, 2017
7
Level 5
Pass JSON to a Vue Component
In my blade file, I add something like this:
<tags tags="{{ $tags }}"></tags>
Because $tags is a Laravel collection, tags are automatically converted to JSON. However, when I access them from Vue, they're a string. I tried doing this:
created() { this.tags = JSON.parse(this.tags); }
But that triggered a Vue error about immutability.
So - how do I pass JSON data from Laravel to Vue without using AJAX or global variables?
Level 46
I think you might need to use a computed property. Vue will squark if you try to mutate a prop.
Level 5
@FWSimon - I don't think the error is relevant here. I'm trying to figure out how to properly pass data from Laravel to Vue.
That said, here is the error:
browse.js:558 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "tags"
Level 5
@topvillas Is that the "normal way" passing data from Laravel to Vue?
Level 46
Yeah, there aren't really any other simple ways to do it.
Level 47
you should pass tags as object , then Vue can traversal it
<tags :tags="{{ $tags }}"></tags>
:is very important , without it ,you are passing a single string to vue.
8 likes
Level 1
You can also fetch data from component via ajax. But in this case you will need to deal async/await stuff.
Please or to participate in this conversation.