时间戳

首页 > 解决方案 > 如何绕过 vue 组件中只有一个根元素的要求？

vue.js - 如何绕过 vue 组件中只有一个根元素的要求？

问题描述

我有一个案例，我想不出任何其他解决方案可以解决我的问题。我的任务是在 CSS 网格中布局项目，这些项目可以是引导卡或卡列表或列表列表......或列表列表列表等等。最后总是归结为一张卡片。正如您可能已经猜到的那样，我需要为此进行递归。所以我有一个卡片组件，它的代码与我的问题无关，所以我不会包含它。我还有一个包装器组件如下

<template>
    <div class="container-fluid" >
        <div class="wrapper-content">
            <template v-for="item in items">
                <content-display :expand="expand" :item="item" :params="params" :param="neededParam(item.id)" :key="item.id"></content-display>
            </template>
        </div>
    </div>    
</template>
<script>

<style>
    .wrapper-content {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
        grid-auto-rows: auto;
        grid-gap: 1em;
    }
</style>

然后我还有内容显示组件，它要么使用卡片组件，要么使用列表组件

  <template>
    <div>
        <template v-for="item in items">
            <list-component v-if="expand" :params="params" :param="param" :key="item.id" :item="item" :is="item.object_type.ModelName"></list-component>
            <object-card v-else :key="item.id" :item="item" :param="param"></object-card>
        </template>
    </div>
    
</template>

最后，这是列表组件

<template>
    <object-card v-if="!expand" :item="item" :param="param">
    </object-card>
    <content-display v-else :items="item.entity.list_objects" :params="params">
    </content-display>
</template>

我的问题是内容显示组件我需要卡片是网格的直接子节点，但是由于 Vue 的限制我无法实现这一点，因为我需要有那个外部 div 包装器而不是这个

<div class="container-fluid" >
        <div class="wrapper-content">
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
        </div>
    </div>

我明白了

<div class="wrapper-content">
            <div class="card"></div>
            <div class="card"></div>
            <div>
                <div class="card"></div>
                <div class="card"></div>
            </div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
        </div>

注意：我曾考虑style="grid-column: 1 / -1;"在该外部 div 上使用，然后在其中有另一个网格，但我生成的 html 会非常混乱。

标签： vue.jsvue-componentcss-grid

解决方案

使用 Vue 3 -没有这个限制。

但是如果你使用 Vue 2，那么试试VueFragment

const Fragments = window.VFragments
const Fragment = Fragments.VFragment

new Vue({
  el: "#app",
  components: {
    Fragment,
  },
})
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@superyusuke/vue-fragment@1.0.0/dist/vue-fragments.min.js"></script>
<div id="app" class="grid-container">
  <fragment>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </fragment>
</div>

您可以看到<fragment>被“绕过” CSS Grid。

推荐阅读