CODEWITHSUNDEEP
phplaravelvue.jsvuejs2
TeachMe
TeachMe

Reputation: 625

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

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.
![image of wrong output 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

Upvotes: 1

Views: 1442

Answers (1)

TeachMe
TeachMe

Reputation: 625

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"}]

Upvotes: 1

Related Questions