0
点赞
收藏
分享

微信扫一扫

vue组件for循环无效果的原因之一


Vue.component('test', {
props: ['sites'],
template: '<li v-for="item in sites"><div class="Commodity-details"><img v-bind:src="item.commodityImage"><div class="details">{{item.details}}</div><div class="commodity-Price">¥{{item.commodityPrice}}<span>{{item.goodsSubjectId}}人付款</span></div></div></li>',
data: function(){
return {
sites: []
}
},
mounted:function(){
console.log(this.sites)

}
})

以上代码for循环无效果

正确代码是给for循环元素的外部嵌套一层元素

Vue.component('test', {
props: ['sites'],
template: '<div><li v-for="item in sites"><div class="Commodity-details"><img v-bind:src="item.commodityImage"><div class="details">{{item.details}}</div><div class="commodity-Price">¥{{item.commodityPrice}}<span>{{item.goodsSubjectId}}人付款</span></div></div></li></div>',
data: function(){
return {
sites: []
}
},
mounted:function(){
console.log(this.sites)

}
})

这样就有效果了


举报

相关推荐

0 条评论