VueJ의 상태 저장 구성 요소 루트 요소에서 v-for를 사용할 수 없음s

VueJ의 상태 저장 구성 요소 루트 요소에서 v-for를 사용할 수 없음s

작은 어플리케이션을 구축하려고 합니다.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를 사용할 수 없습니다.

어디서 실수를 하고 있는지 모르겠으니 좀 도와주세요.

감사합니다.

컴포넌트를 작성할 때 필요한 것은1root 요소, 코드 줄 바꿈을 시도합니다.<div/>태그를 붙이면 문제가 해결됩니다.

예.

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

vue 2.0 use latest 문법은 다음과 같습니다.

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

언급URL : https://stackoverflow.com/questions/45565870/cannot-use-v-for-on-stateful-component-root-element-in-vuejs