当只有一个存在时，Vue.js有多个根节点[重复]

Posted 2021-03-28

这个问题在这里已有答案：

• A way to render multiple root elements on VueJS with v-for directive 3回答

我正在使用v-for循环编写一些Vue.js代码。内部只有一个html节点，但Vue会抛出两个错误：

vue.js:597 [Vue warn]: Error compiling template:

<div id="products" v-for="p in productList">
                            <div class="col-sm-4 col-md-3">
                                <figure class="figure">
                                    <img src="img/worship_area.JPG" class="figure-img img-fluid rounded" alt="Worship Area">
                                    <figcaption class="">{{ p.name }}</figcaption>
                                </figure>
                            </div>
                        </div>

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


(found in <Root>)

和

[Vue warn]: Multiple root nodes returned from render function. Render function should return a single root node.

(found in <Root>)

我的javascript是：

var products;
    $(document).ready(() => {
        products = new Vue({
            el: "#products",
            data: {
                productList: [
                    {name:"Worship Area"}
                ]
            }
        });
    });

并且引用的HTML是：

<div id="products" v-for="p in productList">
    <div class="col-sm-4 col-md-3">
        <figure class="figure">
            <img src="img/worship_area.JPG" class="figure-img img-fluid rounded" alt="Worship Area" />
            <figcaption class="">{{ p.name }}</figcaption>
         </figure>
    </div>
</div>

知道我做错了什么吗？我只在#products中看到一个标签，但它抱怨多个元素。页面中只有一个带有products和id属性的元素，这是上面引用的元素。

答案

你应该将你的html元素包装成单个root元素：

<div id="products"><!-- now, it is the root element -->
<div v-for="p in productList">
    <div class="col-sm-4 col-md-3">
        <figure class="figure">
            <img src="img/worship_area.JPG" class="figure-img img-fluid rounded" alt="Worship Area" />
            <figcaption class="">{{ p.name }}</figcaption>
         </figure>
    </div>
</div>
</div>

另一答案

尽管乍一看它看起来像一个单根，但v-for指令根据循环变量呈现它的多个副本。所以主要的根元素必须是不可循环的东西。

您可以使用另一个div包装模板代码，并将代码更改为以下内容：

<div id="products">
    <div v-for="p in productList">
        <div class="col-sm-4 col-md-3">
            <figure class="figure">
                <img src="img/worship_area.JPG" class="figure-img img-fluid rounded" alt="Worship Area">
                <figcaption class="">{{ p.name }}</figcaption>
            </figure>
        </div>
    </div>
</div>