send two or more variable from laravel controller to vue component

Question

assume I have a Vue component like this

export default {
    created() {
        axios.get("a url").then(res => {
            console.log(res.data);
        });
    }
};

and then axios send request to this function in laravel controller

public function something()
{
    $data = Model::all();
    $comments = Comment::all();
    // here i want to send both $data and $comments to that view
    return response()->json();
}

can i send both of them? this component and function are just an example

Mr.Throg · Accepted Answer · 2019-09-04 07:27:41Z

2

Here you go you can create an associate array and send through json.

public function something()

    {
        $data=Model::all();
        $comments=Comment::all()
        return response()->json([
         'data'=>$data,
         'comments'=>$comments
       ]) //here i want to send both $data and $comments to that view
    }

In Vue you can write something like this.

export default
{
    data(){
       return {
         comments:[]
       }
    },
    created()
        {

           axios.get("a url")
                .then(res=>{
                    this.comments = [...res.data.comments] //If you are using ES6
                    }
        }
}

edited Sep 4, 2019 at 7:27

answered Sep 4, 2019 at 7:23

Mr.Throg

1,0058 silver badges22 bronze badges

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

Comments

Salman Zafar · Accepted Answer · 2019-09-04 13:34:13Z

1

You can achieve this simply by using response method of laravel

public function something()
{
    $data=Model::all();
    $comments=Comment::all()
    return response()->json([
         'data'=> $data,
         'comments'=> $comments
       ], 200);
}

or the other way using same method

public function something()
{
        $data=Model::all();
        $comments=Comment::all()
        return response([
         'data'=> $data,
         'comments'=> $comments
        ], 200);
}

and in your component you can simply get data using

export default
{
    created()
        {
           axios.get("a url")
                .then(res=>{
                       console.log(res.data.data)
                       console.log(res.data.comments)
                    }
        }
}

Thanks

edited Sep 4, 2019 at 13:34

answered Sep 4, 2019 at 7:28

Salman Zafar

4,0755 gold badges23 silver badges44 bronze badges

Comments

Salman Zafar · Accepted Answer · 2019-09-04 07:50:34Z

1

You can simply do this

public function function()

{
    $data=Model::all();
    $comments=Comment::all()
    return response()->json([
     'data'=>$data,
     'comments'=>$comments
   ]) //here i want to send both $data and $comments to that view
}

edited Sep 4, 2019 at 7:50

Salman Zafar

4,0755 gold badges23 silver badges44 bronze badges

answered Sep 4, 2019 at 7:24

Pranta Roy

111 bronze badge

1 Comment

law_81 Over a year ago

Please provde some explanation to your answer

Collectives™ on Stack Overflow

send two or more variable from laravel controller to vue component

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related