Vuetify + Nuxt：递归目录问题？

Posted 2023-02-23

【中文标题】Vuetify + Nuxt：递归目录问题？

【英文标题】：Vuetify + Nuxt: Recursive Table Of Contents issues?

【发布时间】：2020-01-10 09:40:34

【问题描述】：

我正在尝试使用 Vuetify 和 Nuxt 创建一个目录 (TOC) 组件。在本地，我正在使用来自

的新 nuxt 应用程序（选择了 vuetify）

npx create-nuxt-app my-app

这里是Code Sandbox。您需要全屏查看 TOC，因为它是绑定在屏幕右侧的 navigation-drawer。

在本地，它呈现为：

在Code Sandbox 上显示为：

我已经仔细检查了版本和nuxt.config.js 文件。他们是一样的。

那么想要的结果是什么？ 我喜欢本地版本的自动缩进。不幸的是，没有子元素的元素（例如h2-1）即使与h2-2处于同一级别，也不会缩进。

我将不胜感激。

【问题讨论】：

您的代码框结果为空。

@ManUtopiK 如 OP 所述，它是正确的导航栏，因此您需要有足够宽的屏幕才能看到它。您必须打开完整显示（即n0gdh.sse.codesandbox.io）

我有 34" 屏幕，但没有全屏打开。我现在知道了！

但如果它在本地工作，为什么要在代码沙箱中拥有相同的功能？我不明白你的问题的目的......

是的，我同意我们之间存在误解。在帖子的图片中，尽管代码相同，但您会看到有两个不同的输出。本地版本的缩进很好，但并不完全正确。注意 h2-1 应该缩进@ManUtopiK

【参考方案1】：

您可以通过在您的 css 中添加每个子组来添加缩进：

.v-list-item-group > div 
    margin-left: 20px;