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

创建组件时，需要1根元素，尝试将代码包装在<div/>标记中。它应该解决这个问题;

即

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

Answer 2

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

document.getElementById("popupDateFieldMin").value = "2017-08-02";

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

2 个答案: