How to use Laravel data in Vue component

Question

File Structure

Inside App.blade.php

I used vue router to pull the components.

I have a normal variable like $users which I can access in blade file like {{$users}} . Now how can I access the same data in my component?

where your component exist ? in .php file or in .js or .vue file ? — Niklesh Raut
– Niklesh Raut, Commented Dec 14, 2018 at 8:05

Brian Lee · Accepted Answer · 2018-12-14 07:40:25Z

1

If your $users variable is a collection you can use:

<my-component :users="{!! $users->toJson() !!}"></my-component>

answered Dec 14, 2018 at 7:40

Brian Lee

18.3k3 gold badges45 silver badges55 bronze badges

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

2 Comments

Niklesh Raut Over a year ago

This will definitely work only when if this component put inside .php file.

Brian Lee Over a year ago

I assume that being the case here as App.blade.php is mentioned.

Niklesh Raut · Accepted Answer · 2018-12-14 07:42:21Z

0

Laravel is php server side scripting language which compiled before front end Javascript and Vue is javascript.

So to get value of php variable in js take this value in a input text field as json

<input type="hidden" id="users" value="{{json_encode($users)}}">

And inside vuejs inside mount() update your data's, users element

mounted(){
   var users = document.querySelector("#users").value;
   users = JSON.pars(users);
   this.users = users;
}

answered Dec 14, 2018 at 7:42

Niklesh Raut

34.9k17 gold badges82 silver badges112 bronze badges

Comments

Murad Shukurlu · Accepted Answer · 2020-05-13 09:07:55Z

0

For this purpose I am using props, Look at my example :

I have a QuestionComponent and I want to sent $quetion_set->id valuable to the file so that In blade file I sent a props ,

 <question question_set_id="{{$question_set->id}}"/>

In the QuestionComponent I set props : props:['question_set_id'], then used it in the component like this : this.question_set_id

If you want to pass array data then you should use JSON.parse function to reache your data , for example :

   JSON.parse(this.question_set_id)['id']

edited May 13, 2020 at 9:07

answered May 13, 2020 at 9:02

Murad Shukurlu

4776 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to use Laravel data in Vue component

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related