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

Question

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

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

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

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

3. 是否可以通过将其放入我的 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，所以请不要对我太严厉。

Answer 1

您可以修改组件以接收数组作为 prop，如下所示：

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

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

            }
        }
    }
</script>

在 Blade 模板中传递你的$data['hosts']throughhost-data属性：

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

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

            }
        }
    }
</script>