vue.js - Why two Vue.js identical components with different prop names give different results?
问题描述
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
解决方案
这是由于使用的外壳props
:https ://vuejs.org/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case
如果您mydataTwo
在组件声明中使用 as prop,则需要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>
推荐阅读
- laravel - 如何在 Laravel 中建立动态模型关系?
- qt - 为树莓派 4 交叉编译 qt6
- python - 使用 OpenCV 进行 Pi 相机曝光控制
- php - 为什么 Telegram 键盘不与 Guzzle 请求一起发送
- c++ - 如何在 Github 的 Windows2019 镜像上安装 autoconf/bison/flex?
- python - 给定一个长度为 N 的有序整数列表,确定元素 x 是否在列表中
- android - 如何使布局与recyclerview一起滚动
- python - 如何为日期时间字段自定义 Django 模型的 field.value_to_string(self)
- android - Kotlin & Room:从插入的返回 id 不起作用
- shopware - Shopware SEO URL,其中包含产品选项名称