프로덕션 빌드에서 VueJS 2 프로퍼티가 전달되지 않음

Question

Vue 프로덕션 빌드에서 프로퍼티를 얻는 데 어려움을 겪고 있습니다. 모든 것이 개발 단계에서 제대로 작동하는 것처럼 보이지만 앱을 컴파일하면 그렇지 않습니다.

navigation.js : 내가 예를 들어 사용하고이 탐색 구성 요소를 가지고

import Vue from 'vue'; 
import template from './navigation.html'; 

export default Vue.extend({ 
    props: ['activePage'], 
    template, 
    methods: { 
    setActivePage: function() { 
     // Set activeEl to ref (see template) that corresponds to activePage parameter 
     var activeEl = this.$refs[this.activePage]; 
     if (activeEl) { 
     activeEl.className += ' active'; 
     } 
    } 
    }, 
    mounted: function() { 
    this.setActivePage(); 
    } 
}); 

navigation.html :

<div class="container"> 
    <nav class="navigation"> 
     <div class="navigation__bar"> 
      <router-link to="/"><img class="navigation__brand" src="placeholder" /></router-link> 

      <ul class="navigation__links"> 
       <li class="navigation__link" ref="a"><router-link to="/">a</router-link></li> 
       <li class="navigation__link" ref="b"><router-link to="/b">b</router-link></li> 
       <li class="navigation__link" ref="c"><router-link to="/c">c</router-link></li> 
      </ul> 
     </div> 
    </nav> 
</div> 

이 내가이 구성 요소를 사용하는 방법입니다 :
<navigation activePage="a"></navigation>

S o이면이 구성 요소는 activePage 속성을 사용하고 activePage 값에 해당하는 ref가있는 경우 템플릿을 확인하고 true 인 경우 active 클래스를 ref 요소에 추가합니다. 그것은 개발 빌드에서 작동하지만, 생산은이 결과 : 여기 뭔가 잘못하고

<div class="container" activepage="cases">

암을?

Answer 1

https://github.com/villeristi/vue.js-starter-template 당신은 낙타 표기법 소품을 바인딩 할 때 케밥 케이스를 사용할 필요가 https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case

에서보세요 : 그 중요한 경우 내 프로젝트는이 템플릿을 기반으로합니다. 당신은 사용해야합니다

<navigation active-page="a"></navigation>