CODEWITHSUNDEEP
javascriptlaravelvue.js
drake24
drake24

Reputation: 525

Passing Laravel variables to Vue.js

I am starting to learn about Vue.js. I would like to know how to pass the blade variables into Vue.js?

Like 

    return view('user.profile', ['locations' => $allLocations);

In which i can manipulate it through Vue.js?

Because I am planning on implementing a dynamic dropdown. Actually, there are two dropddowns. So whatever the user selects on the first dropdown, the second dropdown will display only specific options.

I already tried to implement it by 1.) hiding an elements an retrieving it through Javascript, or by 2.) using an HTTP AJAX request after page load to initialize the elements but I found this method a little bit messy or somewhat a resource hog. Is there any other implementations aside from what I mentioned above?

Thanks!

Upvotes: 1

Views: 5714

Answers (4)

GabMic
GabMic

Reputation: 1482

The easiest way to do it is to pass it to your views(where you have the vue component), and receiving it as a prop.

 return view('user.profile', ['locations' => $allLocations]);

and in your view:

<your-component :data="{{$allLocations}}></your-component>

and the vue component, along the line of this:

<template>
    --your HTML here--
</template>

<script>
    export default{

        props:['data'],

        data(){
            return{
                somethig:this.data.something
            }
        }
    }
</script>

This should get you started. furthermore, i would suggest you to learn more in the laravel docs, vue docs, laracasts etc.

Best of coding to you!

Upvotes: 1

Alex
Alex

Reputation: 4266

You can use Vue, Vuex, Axios

When use .vue, I think you don't need .blade

With Vue + Laravel:

  1. Create App.vue in assets/js

  2. Import App.vue in app.js (folder assets with Laravel 5.6)

  3. You would like to pass the blade variables into Vue.js? Use JSON or XML. I love Json. So in Laravel Controller -> return json

  4. In App.vue, you can use axios call to API (Use Laravel create 1 API in controller + route...) and You have all variables, you want :)

Help it help you. Thanks

Upvotes: 0

Ben
Ben

Reputation: 5129

You can either implement these two ways to pass down the variables:

  1. Pass the variables to view with JSON format

    <script>
    var app = <?=json_encode($locations)?>
</script>

    See also: Displaying Data

  2. Pass the variables by ajax request

    JS snippet (can place inside Vue mounted / created method)

    $.ajax({
    method: 'GET',
    url: '/api/locations',
    success: function (response) {
        // response.locations
    }
});

    API Route (routes/api.php)

    Route::get('locations', 'LocationController@getLocations');

    LocationController

    public function getLocations() {
    ...
    return response()->json($locations);
}

Upvotes: 5

Rahul shukla
Rahul shukla

Reputation: 378

i tried using the method to check my subscription and found it handy you:-

Vue.component('subscribe', require('./components/Subscribe.vue'));
const app = new Vue({
    el: '#app'
});

Try by going to the link :- enter link description here

Upvotes: -1

Related Questions