Доступ к массиву php внутри шаблона vue.js

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. Isможно получить к нему доступ в моем компоненте vue, поместив его в мой index.blade.php вместо приведенного выше примера?

   <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

Вы можете изменить свой компонент так, чтобы он получал массив в виде пропов: