vue.js 템플릿 내의 php 어레이에 액세스합니다.

vue.js 템플릿 내의 php 어레이에 액세스합니다.

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에 넣으면 vue 컴포넌트 내에서 접근할 수 있습니까?위의 예제가 아닌 php?

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

   다음과 같이 표시됩니다.

   Vue.component('host', require('./components/host.vue').default);
   
   const app = new Vue({
       el: '#app'
   });
   

   그리고 나의 호스트.vue는 다음과 같습니다.

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

오늘 시험 시작했으니까 너무 심하게 하지 마세요.

다음과 같이 컴포넌트를 변경하여 어레이를 소품으로 받을 수 있습니다.

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

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

            }
        }
    }
</script>

블레이드 템플릿의 경우$data['hosts']통해.host-data소품:

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

언급URL : https://stackoverflow.com/questions/54618198/access-php-array-inside-vue-js-template