Vue.js에서 Props가 안넘어가는 문제 (undefined)

<report-list :reports="reports" :fields="fields" :clickHandler="moveToReport"></report-list>

var ReportList = {
	Props: ['clickHandler']
};

new Vue({
  .. 
  methods:  {
    moveToReport: function() {
       ....
    }
  }
});

 

clickHandler를 넘기고 싶은데, report-list에서 props 를 찍어보면 계속 undefined로 떠서 도대체 왜 이러나 싶었다.

<report-list :reports="reports" :fields="fields" :handler="moveToReport"></report-list>

var ReportList = {
	Props: ['handler']
};

new Vue({
  .. 
  methods:  {
    moveToReport: function() {
       ....
    }
  }
});

대소문자를 섞어쓰지 않고 소문자로만 props명을 만드니 잘 작동했다.

 

관련해서 가이드가 있었다.

https://vuejs.org/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case

Props — Vue.js

HTML attribute names are case-insensitive, so browsers will interpret any uppercase characters as lowercase. That means when you’re using in-DOM templates, camelCased prop names need to use their kebab-cased (hyphen-delimited) equivalents:

DOM 템플릿에서는 camelCase->kebab-case로 변환해서 사용해줘야 한다. 

<report-list :reports="reports" :fields="fields" :click-handler="moveToReport"></report-list>

var ReportList = {
	Props: ['clickHandler']
};

new Vue({
  .. 
  methods:  {
    moveToReport: function() {
       ....
    }
  }
});