不能在VueJS中对有状态组件根元素使用v-for

Question

我正在尝试Vuejs 2.0在我正在命名组件文件的位置构建小型应用程序Text.Vue,以下是组件:

<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或编译我收到的资产文件时出错:

• 无法在有状态组件根元素上使用v-for,因为它呈现多个元素.

我不知道我在哪里做错了,在这帮助我.

谢谢

Answer 1

创建组件时,需要有1root元素,尝试将代码包装在<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>