不能在 VueJS 中的有状态组件根元素上使用 v-for答案

【问题标题】：cannot use v-for on stateful component root element in VueJS不能在 VueJS 中的有状态组件根元素上使用 v-for
【发布时间】：2018-01-15 21:05:45
【问题描述】：

我正在尝试在 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，因为它会呈现多个元素。

我不知道我在哪里做错了，帮我解决这个问题。

谢谢

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

创建组件时，需要有1 根元素，请尝试将您的代码包装在<div/> 标记中。它应该可以解决问题；

即

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

【讨论】：

【解决方案2】：

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

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

【讨论】：