不能有状态组件根元素上使用V-在VueJS

Question

我想在那里我有一个名为Text.Vue组件文件，并按照对Vuejs 2.0构建小应用程序是组件：

<template> 
    <!-- Post --> 
    <div class="blog-item" v-for="item in items"> 

     <!-- Post Title --> 
     <h2 class="blog-item-title font-alt"><a href="#">{{ item.title }}</a></h2> 

     <!-- Author, Categories, Comments --> 
     <div class="blog-item-data"> 
      <a href="#"><i class="fa fa-clock-o"></i> {{ item.created_at }} </a> 
      <span class="separator">&nbsp;</span> 
      <a href="#"><i class="fa fa-user"></i> John Doe</a> 
      <span class="separator">&nbsp;</span> 
      <i class="fa fa-folder-open"></i> 
      <a href="">Design</a>, <a href="#">Branding</a> 
      <span class="separator">&nbsp;</span> 
      <a href="#"><i class="fa fa-comments"></i> 5 Comments</a> 
     </div> 

     <!-- Text Intro --> 
     <div class="blog-item-body"> 
      <p> 
       {{ item.content }} 
      </p> 
     </div> 

     <!-- Read More Link --> 
     <div class="blog-item-foot"> 
      <a href="#" class="btn btn-mod btn-round btn-small">Read More <i class="fa fa-angle-right"></i></a> 
     </div> 

    </div> 
    <!-- End Post --> 
</template> 

<script> 
    export default { 
     data() { 
      return { 
       title: 'POST WITH TEXT ONLY', 
       contents: 'Suspendisse accumsan interdum tellus, eu imperdiet lacus consectetur sed. Aliquam in ligula ac lacus blandit commodo vel luctus quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras eu ultrices mauris.', 
       date_time: '4 December', 
       items: [] 
      } 
     }, 
     beforeCreate() { 
      axios.get('/Blog/api/posts').then(response => { 
       if(response.status === 200) 
       { 
        this.items = response.data.posts 
       } 
      }) 
     } 
    } 
</script> 

虽然这样做npm run dev或编译我收到的资产文件和错误：

• Cannot use v-for on stateful component root element because it renders multiple elements.

我不知道我在哪做错了，帮我在这里。

感谢

Answer 1

当创建需要有1根元素的成分，尝试在<div/>标签包装你的代码。它应该解决问题;

即

<div> 
    <div class="blog-item" v-for="item in items"> 
     // Your code... 
    </div> 
</div> 

Answer 2

因为vue2.0使用最新的语法是做 例如：

<template> 
    <div> 
    <div class="blog-item" v-for="item in items"> 
    </div> 
    </div> 
</template>