Level 65
This maybe?
<user-list :users="@json($users)" > </user-list>
Since you want an object or array, you don't need the single quotes for the prop.
1 like
Apr 30, 2018
4
Level 1
Can't parse to json object when string contain single quote(') or double quote(").
Hi everyone, I am very new to vue.js and I don't know how to pass the variable correctly. So if there is tutorial showing correct ways, please kindly show me the link. Or if you are so generous, show me the way please.
I am using Vue.js and the concept is just like this: In my controller, i fetch some models, convert to json string and pass it to view, just like this.
$users = User::all();
$users->tojson();
return View('viewpath',compact('users'));
and in my view, I pass it to Vue componet and
<user-list :users="'{{$users}}'" > </user-list>
and on the component mounted event, I parse it and assign to the variable
props : ['users'],
data : function{
return {
user_list : { }
}
},
mounted ( ) {
this.user_list = JSON.parse(this.users);
},
Ugly. But everything is working fine ,but when there is single quote(') or double qoute("), JSON.parse() throws "invalid expression: Unexpected identifier" error.
Level 50
u are passing user instead of users
$users = User::all();
return View('viewpath',compact('users'));
1 like
Level 50
props : ['users'],
data : function{
return {
user_list : this.users
}
}
1 like
Level 1
Thanks for your quick replies. (really quick) @bashy answer did parse the string but vue doesn't compile and I can see json-format string and the rest html tags on the browser.(not console)
and @rin4ik the 's' is my fault. It is typing error in the question.
Now, I tried another way and it works. (As I'm not expert, I don't know it should be correct answer)
instead of passing user array, I pass the url.
$url = route('fetchUsers');
return View('viewpath',compact('url'));
and pass it to vue component.
<user-list :url="{{$url}}" > </user-list>
In the component, make an ajax request with the provided url and
props : ['url'],
data : function{
return {
user_list : { }
}
},
mounted ( ) {
var vue_obj = this;
$.ajax({
url:vue_obj.url,
type:'GET',
success:function(response){
vue_obj.user_list = response.user_list;
}
});
},
In the controller, return json response.
$user_list = User::all();
return Response::json(['success'=>true,'user_list'=>$user_list]);
Both single quote and double quote are parsed automatically now. But if there is a cleaner way, please teach me. Thank everyone.
Please or to participate in this conversation.