为什么两个 Vue.js 相同的组件具有不同的 prop 名称会给出不同的结果? [英] Why two Vue.js identical components with different prop names give different results?
本文介绍了为什么两个 Vue.js 相同的组件具有不同的 prop 名称会给出不同的结果?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Codepen.io: https://codepen.io/xblack/pen/jXQeWv?editors=1010
HTML part:
<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 part:
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();
}
});
Output:
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
解决方案
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:
<child-two :mydataTwo="mydata"></child-two>
You should be doing this:
<child-two :mydata-two="mydata"></child-two>
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();
}
});
<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>
这篇关于为什么两个 Vue.js 相同的组件具有不同的 prop 名称会给出不同的结果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
