Why two Vue.js identical components with different prop names give different results?

Question

Codepen.io: https://codepen.io/xblack/pen/jXQeWv?editors=1010

HTML part:

Answer 1

That's due to the casing used for props: https://vuejs.org/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case

If you're using mydataTwo as the prop in the component declaration, then you will need to use v-bind:mydata-two in the template, not v-bind:mydataTwo.

Instead of doing this:

You should be doing this:

See proof-of-concept example:

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();
  }
});