서로 다른 프로펠러 이름을 가진 동일한 2개의 Vue.j 컴포넌트 결과가 다른 이유는 무엇입니까?

서로 다른 프로펠러 이름을 가진 동일한 2개의 Vue.j 컴포넌트 결과가 다른 이유는 무엇입니까?

코드펜io: https://codepen.io/xblack/pen/jXQeWv?editors=1010

HTML 부품:

<div id="app">  
  <ul>
    <child-one :one="mydata"></child-one>
    <child-two :mydataTwo="mydata"></child-two>
  </ul>
</div>

<!-- child one template -->
<script type="text/x-template" id="child-one"> 
    <ul>
      LIST ONE
      <li v-for="item,i in one"> {{i}} {{item.name}} {{item.username.name}} {{item.email}} </li>   
    </ul>
</script> 

<!-- child two template -->
<script type="text/x-template" id="child-two"> 
    <ul>
      LIST TWO
      <li v-for="item,i in mydataTwo"> {{i}} {{item.name}} {{item.username.name}} {{item.email}} </li>   
    </ul> 
</script> 

JS 부품:

Vue.component('child-one',{
  template:'#child-one',
  props:['one'] 
});

Vue.component('child-two',{
  template:'#child-two',
  props:['mydataTwo'] 
});

let app = new Vue({
  el:'#app',
  data:{
    welcome:'Hello World',
    mydata:[]
  },
  methods:{
    getdataApi(){
      fetch( "https://jsonplaceholder.typicode.com/users").then(r => r.json()).then( (r) => {
        this.mydata = r;
      }); 
    } 
  },
  mounted:function(){ 
    this.getdataApi();
  }
});

출력:

     LIST ONE
    0 Leanne Graham Sincere@april.biz
    1 Ervin Howell Shanna@melissa.tv
    2 Clementine Bauch Nathan@yesenia.net
    3 Patricia Lebsack Julianne.OConner@kory.org
    4 Chelsey Dietrich Lucio_Hettinger@annie.ca
    5 Mrs. Dennis Schulist Karley_Dach@jasper.info
    6 Kurtis Weissnat Telly.Hoeger@billy.biz
    7 Nicholas Runolfsdottir V Sherwood@rosamond.me
    8 Glenna Reichert Chaim_McDermott@dana.io
    9 Clementina DuBuque Rey.Padberg@karina.biz 
    LIST TWO 

그 이유는 에 사용되는 케이스 때문입니다.props: https://vuejs.org/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case

사용하시는 경우mydataTwo컴포넌트 선언의 소품으로서 다음과 같이 사용할 필요가 있습니다.v-bind:mydata-two템플릿에 포함시키지 않음v-bind:mydataTwo.

이렇게 하는 것이 아니라:

<child-two :mydataTwo="mydata"></child-two>

다음 작업을 수행해야 합니다.

<child-two :mydata-two="mydata"></child-two>

개념 실증 예를 참조하십시오.

Vue.component('child-one',{
  template:'#child-one',
  props:['one'] 
});

Vue.component('child-two',{
  template:'#child-two',
  props:['mydataTwo'] 
});

let app = new Vue({
  el:'#app',
  data:{
    welcome:'Hello World',
    mydata:[]
  },
  methods:{
    getdataApi(){
      fetch( "https://jsonplaceholder.typicode.com/users").then(r => r.json()).then( (r) => {
        this.mydata = r;
      }); 
    } 
  },
  mounted:function(){ 
    this.getdataApi();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">  
  <ul>
    <child-one :one="mydata"></child-one>
    
    <!-- Fix: use `mydata-two` instead of `mydataTwo` -->
    <child-two :mydata-two="mydata"></child-two>
    <!-- /Fix -->
  </ul>
</div>

<!-- child one template -->
<script type="text/x-template" id="child-one"> 
    <ul>
      LIST ONE
      <li v-for="item,i in one"> {{i}} {{item.name}} {{item.username.name}} {{item.email}} </li>   
    </ul>
</script> 

<!-- child two template -->
<script type="text/x-template" id="child-two"> 
    <ul>
      LIST TWO
      <li v-for="item,i in mydataTwo"> {{i}} {{item.name}} {{item.username.name}} {{item.email}} </li>   
    </ul> 
</script>

언급URL : https://stackoverflow.com/questions/54163232/why-two-vue-js-identical-components-with-different-prop-names-give-different-res