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

问题描述

问 题

如题。

当这样使用时，会提示
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

求解。

解决方案

今天也遇到了同样的问题，上网查了一圈。终于知道了原因。大致意思就是 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...

这篇关于vue.js为什么在component的template的root标签中不能使用v-for？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！