components - 一种使用 v-for 指令在 VueJS 上渲染多个根元素的方法

Question

现在，我正在尝试创建一个网站，该网站显示由我的 NodeJS API 提供的最近的新闻帖子。

我尝试了以下方法:

HTML

<div id="news" class="media" v-for="item in posts">
    <div>
        <h4 class="media-heading">{{item.title}}</h4>
        <p>{{item.msg}}</p>
    </div>
</div>

Javascript

const news = new Vue({
    el: '#news',
    data:   {
        posts:  [
            {title: 'My First News post',   msg: 'This is your fist news!'},
            {title: 'Cakes are great food', msg: 'Yummy Yummy Yummy'},
            {title: 'How to learnVueJS',    msg: 'Start Learning!'},
        ]
    }
})

显然，上面的方法不起作用，因为 Vue 无法渲染多个根元素。

我查了 VueJS 的官方手册，并没有想出一个解决方案。
谷歌搜索一段时间后，我明白不可能渲染多个根元素，但是，我还没有想出一个解决方案。

Answer 1

我发现添加多个根元素的最简单方法是添加一个 <div>包装元素并使用一些 CSS 魔法使其消失以进行渲染。

为此，我们可以使用“display:contents”CSS 属性。效果是它使容器消失，使元素的子元素成为 DOM 中的下一级元素。

因此，在你的 Vue 组件模板中，你可以有这样的东西:

<template>
    <div style="display: contents"> <!-- my wrapper div is rendered invisible -->
        <tr>...</tr>
        <tr>...</tr>
        <tr>...</tr>
    </div>
</template>

我现在可以使用我的组件，而浏览器不会因为包装 <div> 而搞乱格式。出于显示目的，浏览器将忽略根元素:

<table>
   <my-component></my-component> <!-- the wrapping div will be ignored -->
</table>

但是请注意，虽然这应该适用于大多数浏览器，但您可能希望 check here以确保它可以处理您的目标浏览器。