vue.js为什么在component的template的root标签中不能使用v-for？

Question

如题。

当这样使用时，会提示
example：

<script type="text/x-template" id="article-template">

<div v-for="article in articles" style="margin:13px">
    <div class="article-image">
        <a>
        <img :src="article.image_path"/>
        </a>
    </div>
    <div class="article-title">
        <h4>{{article.title}}</h4>
    </div>
    <div class="article-content">
        <p v-html="article.content"></p>
    </div>
</div>

</script>

<script type="text/javascript">

Vue.component('article_item', {
    template: "#article-template",
    replace: true,
    props: {
        articles: Array
    }
});

</script>

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

求解。

Answer 1

今天也遇到了同样的问题，上网查了一圈。终于知道了原因。大致意思就是 v-for不能用于根元素（root element）。因为v-for是个循环，它返回更多的元素。导致无法渲染。
假如我们有

 var app = new Vue({
        el: '#test',
        data: {
            object: {
                FirstName: 'John',
                LastName: 'Doe',
                Age: 30
            }
        }
    })

然后像下面这样写的话就会报上面问题的错误。因为vue这个时候不知道该怎么渲染，因为div是根元素，vue不知道该如何将key,value渲染到那个html标签中

 <div id="test" v-for="(value, key) in object">{{key}}:{{value}}</div>

所以我们得在div上再加一个html标签，譬如下面这样

<div id="test">
    <div  v-for="(value, key) in object"> {{ key }} : {{ value }}</div>
</div>

这样vue渲染的时候会将返回的数据渲染成3个div元素,而上面错误的写法vue无法知道该如何渲染

可以参考 http://stackoverflow.com/ques...

Answer 2

这样写试试,v-for不能用于根元素（root element）

<template v-for="article in articles">
    <div  style="margin:13px">
        <div class="article-image">
            <a>
            <img :src="article.image_path"/>
            </a>
        </div>
        <div class="article-title">
            <h4>{{article.title}}</h4>
        </div>
        <div class="article-content">
            <p v-html="article.content"></p>
        </div>
    </div>
</template>

Answer 3

使用【Vue-Fragment】库，即可。

<template>
    <fragment>
        // fragment是一个虚拟标签。  v-for内容，放在<fragment>内部，就好。
    </fragment
</template>

Vue-Fragment库，在这里：https://github.com/y-nk/vue-f...