Access php array inside vue.js template

Question

I'm trying to learn Laravel and vue.js and stumbled upon a problem. I have this Laravel model which contains a php method that fetches data from a database and puts into objects which are then put into an array. I would then like to access this array inside a vue.js component, but I dont know how I am supposed to do that.

My Laravel model fetches data from the database and puts into objects in an array

I can print out the array, without using vue, from my index.blade.php like this:

@foreach ($data['hosts'] as $hostsKey => $hostsValue)
    <ul>
        @foreach ($hostsValue as $hostKey => $hostValue)
            <li>{!!$hostKey!!}: {!!$hostValue!!}</li>  
        @endforeach   
    </ul>
@endforeach

Is it possible to access it inside my vue component by putting this in my index.blade.php instead of the above example?

<div id="app">
    <hosts></hosts>
</div>

with the app.js looking something like this:

Vue.component('host', require('./components/host.vue').default);

const app = new Vue({
    el: '#app'
});

and my host.vue looking like this:

<template>
    <div>
        {{ hostData }}
    </div>
</template>

<script>
    export default {
        data(){
            return{
                hostData: /* MY PHP VARIABLE HERE */
            }
        }
    }
</script>

Started out trying vue today, so please don't be too hard on me.

I don't speak vue.js, but the general idea of an SinglePageApplication is, that it (vuejs) fetches data from the server when needed through an api. — Jeff
– Jeff, Commented Feb 10, 2019 at 16:14
Okay. Maybe I should set up an api with laravel first and use that with vue — wenzzzel
– wenzzzel, Commented Feb 10, 2019 at 16:22

Travis Britz · Accepted Answer · 2019-03-13 19:30:40Z

6

You could modify your component to receive an array as a prop like :

<template>
    <div>
        {{ hostData }}
    </div>
</template>

<script>
    export default {
       props:['hostData'],
        data(){
            return{

            }
        }
    }
</script>

in blade template pass your $data['hosts'] through host-data prop :


<div id="app">
    <host :host-data="{{ json_encode($data['hosts']) }}"></host>
</div>

edited Mar 13, 2019 at 19:30

Travis Britz

5,6222 gold badges23 silver badges41 bronze badges

answered Feb 10, 2019 at 16:38

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

Collectives™ on Stack Overflow

Access php array inside vue.js template

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

Related