How to send value from controller of Laravel to Vue.js?

Question

I have controller "SomethingController", model "ValueModel" and View "Show.blade.php" and vue with component "vue-component"
Now i want to get send value (i got from model "ValueModel" and the value is in JSON format) from SomethingController to Show.balde.php which will consist vue "vue-component". Finally, I want to get value in vue from the controller.

I know how to send a value from controller to view. And I have sent it to vue when the value is in the string by using props. But I am not being able to send JSON value from prop to vue.

Controller

//SomethingController.php
class SomethingControllerextends Controller
{
    public function index()
    {
        $e = ValueModel::get();
        $e = json_encode($e->toArray());
        return view('pages.Show')->with('e', $e);
    }
}

View

//Show.blade.php
<div class="app">
    <vue-component data={!!$e!!}></vue-component>
</div>

Vue

//SomethingController.php
<script>
export default {
    props: ['data'],
    data(){
        return{
            d : this.data,
        }
    },
    beforeCreate(){
        console.log('helllo');
        console.log(d)
        },
}
</script>

To my surprise i am getting data being printed on window. and operations in function beforeCreate() is not working after the value is being printed on window.
As shown in image, data is being printed on windows that is send from controller where as i want the data in vue. I also want to know why it is being printed.

All works fine for String being returned from controller

I tested all kinds of scenarios and no luck reproducing the error. All works fine on my system. Check if the json itself isn't a problem. Try passign a simple array converted to json. — Peter Matisko
– Peter Matisko, Commented Jun 29, 2019 at 19:27
I got the answer, here single quote must be used . data = '{!!$e!!}'. This is so because the data inside $e has double quote. For eg: [{"country":"Alwaysland","zip":"0023"},{"country":"Neverland","zip":"00111"}]. Thanks for your help! — TeachMe
– TeachMe, Commented Jun 30, 2019 at 4:17
Glad you resolved that! I tried it with both types of quotes and it still worked. Anyway, good luck! — Peter Matisko
– Peter Matisko, Commented Jun 30, 2019 at 14:42

TeachMe · Accepted Answer · 2020-06-23 04:18:58Z

1

I got the answer, here single quote must be used. data = '{!!$e!!}' This is so because the data inside $e has double quote. For eg: [{"country":"Alwaysland","zip":"0023"},{"country":"Neverland","zip":"00111"}]

answered Jun 23, 2020 at 4:18

TeachMe

6551 gold badge6 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

How to send value from controller of Laravel to Vue.js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest