javascript-在vue.js模板中访问php数组

我正在尝试学习Laravel和vue.js并遇到问题.我有这个Laravel模型,其中包含一个PHP方法,该方法从数据库中获取数据并放入对象中,然后将该对象放入数组中.然后,我想在vue.js组件中访问此数组,但是我不知道该怎么做.

>我的Laravel模型从数据库中获取数据并放入数组中的对象
>我可以像这样从我的index.blade.PHP中打印出数组,而无需使用vue：

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

>是否可以通过将其放在我的index.blade.PHP中而不是上面的示例中来在vue组件中访问它？

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

与app.js看起来像这样：

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

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

和我的host.vue看起来像这样：

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

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

今天开始尝试Vue,所以请不要对我太用力.

解决方法:

您可以修改组件以接收数组作为prop,例如：

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

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

            }
        }
    }
</script>

在刀片模板中,通过host-data prop传递$data [‘hosts’]：

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