PHP 구성 요소 인스턴스에 PHP 변수 전달

Question

변수 값을 vue 구성 요소에 전달하려면 어떻게해야합니까?

예를 들어, 인라인 템플릿 클라이언트 세부 정보가 있습니다. laravel에서이 뷰를 얻으므로 지금은 URL /client/1과 함께 제공된 ID를 내 vue 인스턴스로 전달하고 싶습니다. Laravel에 의해로드

내 구성 요소는, 외모와 같은 :

<client-details inline-template> 
    <div id="client-details" class=""> 
      My HTML stuff 
    </div> 
</client-details> 

및 마운트 : 이미

:clientId="{{ $client->id }" 

같은 시도

Vue.component('client-details', { 
    data(){ 
     return { 
      clientId: null 
     } 
    }, 
); 

하지만이 작동하지 않습니다 .

Answer 1

마크 업을 통해 Vue의 구성 요소에 속성을 전달할 수 있으려면 Vue의 props을 사용해야합니다. 다음 예를 살펴 :

<client-details inline-template client-id="{{ $client->id }}"> 
    <div id="client-details" class=""> 
      My HTML stuff 
    </div> 
</client-details> 

당신의 뷰 구성 요소에서 :

Vue.component('client-details', { 
    props: [ 
     { 
      name: 'clientId', 
      default:0, 
     } 
    ] 
}); 

는 이제 뷰 구성 요소의 다른 부분에서, 당신은 this.clientId이 값에 액세스 할 수 있습니다.

HTML에서 우리가 케밥의 경우에 속성 이름을 쓰기 만 뷰 측면에서 우리가 CamelCase를에 쓰기 있습니다. official docs here에 대한 자세한 정보.

Answer 2

방금이 작업을 수행하고 나에게 도움이되었습니다. Laravel 5.4 및 Vue 2.x 사용. 내 구성 요소에서

하는 개체의 속성 (소품) 선언 다음에

<my-component v-bind:current-user='{!! Auth::user()->toJson() !!}'></my-component>

하는 것으로 :

구성 요소가 인스턴스화 내 블레이드 페이지에서

props: ['currentUser'],

을 구성 요소에서 camelCase를 currentUser으로 사용하고 있지만 html은 대소 문자를 구분하지 않으므로 kebab-case (따라서 '현재 사용자')를 사용해야합니다.

또한 블레이드 구문 {{ }}을 사용하면 그 사이의 데이터는 PHP htmlspecialchars을 통해 실행됩니다. 인코딩되지 않은 데이터 (이 경우)를 사용하려면 {!! !!}

Answer 3

Vue 구성 요소에 일부 서버 데이터를 전달해야하므로 컨트롤러에 $server_data 변수를 생성하고 json 스크립트에 전달했습니다. 꼬리표.템플릿

$server_data = json_encode([ 
    "some-data" => SomeObject::all() 
]); 

return View::make('myview', compact('server_data')); 

: 컨트롤러의

VUE 초기화에서

<script type="application/json" name="server-data"> 
    {{ $server_data }} 
</script> 
<!-- Inserts server data into window.server_data --> 
<script> 
    var json = document.getElementsByName("server-data")[0].innerHTML; 
    var server_data = JSON.parse(json); 
</script> 

, 난 계산 속성 넣어 : 다음

computed: { 
    'server_data': function(){ 
     return window.server_data; 
    } 
} 

를 상기 데이터 액세스 구성 요소 템플릿에서 server_data.some_object.