블레이드를 사용하여 Vue 구성 요소에 값 전달

Question

Laravel 5.5에서 실행중인 Vue2가 있습니다. 그러나,이 오류가 계속, 내가 data-route-name="home" 보이나요 검사 때 나는 VUE

<nav-bar data-route-name="{{$routeName}}" :route-name="{{$routeName}}"></nav-bar>

에서 점점 오류를 유지하여 구성 요소에 값을 전달하려고 :

[뷰 경고] : 건물 또는 메소드 "home"은 인스턴스에 정의되어 있지 않지만 렌더링 중에 참조됩니다. 속성을 초기화하여이 속성이 데이터 옵션이나 클래스 기반 구성 요소에 반응하는지 확인하십시오. 참조 : https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

props: ['routeName'], 
mounted() { 
    console.log(this.routeName); 
} 

콘솔 출력 undefined 때 구성 요소가로드가

이제 내 질문은 왜 콘솔 출력은 정의되지 않습니다되고, 이유는 뷰가 경고를받을 수 있나요, 내가 어떻게 수정합니까?

Answer 1

소품에서는 속성 이름에 직접 속성 값을 사용하지 않아야합니다.

props: ['route-name'], 

Answer 2

이 경우 두 개의 템플릿 엔진 인 Laravel Blade 및 Vue를 사용하고 있습니다. 이 섹션 Blade & Javascript Frameworks을 읽어야합니다. 이것을 작성할 때 Laravel의 데이터를 템플릿에 바인딩합니다.

<nav-bar data-route-name="{{$routeName}}" :route-name="{{$routeName}}"></nav-bar> 

// After Laravel Blade Rendering you get: 

<nav-bar data-route-name="home" :route-name="home"></nav-bar> 

// This makes Vue warn because you did not declare data home 

Vue의 데이터를 템플릿에 바인딩하려고합니다. @을 추가하여 Laravel Blade 렌더링을 무시할 수 있습니다. 또한 일부 구문을 수정했습니다. Vue: Template Syntax의 설명서를 읽어야합니다.

<nav-bar data-route-name="@{{routeName}}" :route-name="routeName"></nav-bar> 

// After Laravel Blade Rendering you get: 

<nav-bar data-route-name="{{routeName}}" :route-name="routeName"></nav-bar>