访问 vue.js 模板中的 php 数组答案

【问题标题】：Access php array inside vue.js template访问 vue.js 模板中的 php 数组
【发布时间】：2019-07-04 05:13:38
【问题描述】：

我正在尝试学习 Laravel 和 vue.js，但偶然发现了一个问题。我有这个 Laravel 模型，它包含一个 php 方法，该方法从数据库中获取数据并放入对象中，然后放入一个数组中。然后我想在 vue.js 组件中访问这个数组，但我不知道我应该怎么做。

我的 Laravel 模型从数据库中获取数据并放入数组中的对象中

我可以在不使用 vue 的情况下从我的 index.blade.php 中打印出数组，如下所示：

@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，所以请不要对我太苛刻。

【问题讨论】：

我不会说 vue.js，但 SinglePageApplication 的总体思路是，它 (vuejs) 在需要时通过 api 从服务器获取数据。
好的。也许我应该先用 laravel 设置一个 api，然后用 vue 使用它

标签： javascript laravel vue.js vuejs2 vue-component

【解决方案1】：

您可以修改您的组件以接收一个数组作为道具，例如：

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

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

            }
        }
    }
</script>

在刀片模板中通过 host-data 传递您的 $data['hosts'] 道具：


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

【讨论】：