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

这样就有效果了