问题标签 [vuetify-tabs]

我正在使用 Vuetify 选项卡来显示一些表单，我想添加一个按钮作为选项卡中的最后一个元素，这有助于创建一个新选项卡。现在我可以通过使用防止事件冒泡到选项卡，@click.stop但是每当在按钮外部（在 内v-tab）单击它触发选项卡更改事件时，我尝试@click.prevent并@change阻止默认操作，但似乎没有任何效果。即使我尝试disabled了属性，但它禁用了包括按钮在内的整个选项卡。

编解码器

有没有办法防止 v-tabs 在被点击时实际发生变化？

就我而言，我首先需要检查页面上的内容是否发生了变化，如果有，我想取消切换到另一个选项卡。

event.prevent 和 event.stop 都不会阻止 v-tabs 的变化： <v-tab @click.prevent.stop="..."> ... </v-tab>

目前我正在使用 awindow.requestAnimationFrame将选项卡索引重置为旧值。它完成了工作，但这对我来说感觉是一种非常讨厌的技术。

HTML：

TS：

我有一个 VueJS/Vuetify 应用程序，它具有使用v-tabs/v-tab组件在页面之间导航的标签栏。我已经使用元素中的click事件实现了代码，该事件v-tab检查以确保当用户单击另一个选项卡时没有未保存的内容，如果有，则显示一个v-dialog用于提醒用户的模式。如果用户选择继续，它将继续到所需的选项卡/组件。但是，如果用户Cancel在模式中进行选择，则页面将留在原来的位置。

这是选项卡组件：

和参考baseTabMixin：

问题与标签项突出显示有关。单击新选项卡时，滑块会移动到新选项卡，并且在tabClick()调用单击事件（在本例中）之前，新选项卡标题会加粗。当我Cancel在我的模态中选择时，它会离开页面（如预期的那样），但单击的选项卡仍然突出显示，下方的滑块和粗体文本。由于这一切都发生在我的点击处理程序被调用之前，有没有办法a）在点击事件被调用之前停止突出显示，或者b）将突出显示反转回当前选项卡？

我对 v-data-table 有疑问。我想在我的 v-data-table 中添加用于编辑、删除和添加新产品的按钮。数据来自我的 rest api，并通过我的 getter CARS 分配给 v-data-table。一切都很好，显示了每一行，但没有显示按钮....我尝试了很多不同的方法，但它仍然不起作用..如果你能帮助我，我将不胜感激。此致！

这是我的代码。

第一个图像来自父页面，我从导航中单击一个项目，然后子页面打开，但我不需要与父页眉相同的页眉，我需要像第二张图片中的后退箭头的页眉，但没有父页的页眉。

我还添加了 Sandbox 链接，请检查 App.vue、Help.vue、Help-info.vue、main.js、registerServiceWorker.js、index.js、vue.config.js ... 其他文件是由此自动生成的沙盒编辑器。

现场测试链接

当我运行时npm run build，它返回此错误：

从“！../node_modules/vuetify-loader/lib/runtime/installComponents.js”导入 installComponents | 从'vuetify/lib/components/VApp'导入{ VApp}；| 从'vuetify/lib/components/VAppBar'导入{VAppBar}；@ ./.nuxt/App.js 10:0-49 12:14-23 @ ./.nuxt/index.js @ ./.nuxt/client.js @multi ./.nuxt/client.js

我已经使用vue-scrollto实现了 vuetify 选项卡，当您单击选项卡时，它会滚动到某个位置。

所以我现在想要实现的是，当滚动活动选项卡时，会根据位置而变化。

我已经搜索了几天，但没有找到任何东西。文件

有没有不使用 JQuery 的方法？

使用 JQuery 的结果示例：http: //jsfiddle.net/cse_tushar/Dxtyu/141/

我正在使用vue 2.6.11,vuetify 2.2.9和ziggy 0.8.1. 对于 Vuetify 选项卡，我有以下内容：

根据它的位置route().current()返回不同的值。它返回完整的<template>URL，而<script>它只返回 Laravel 路由名称。问题是即使键和route().current()匹配，相应的选项卡仍然没有设置为活动。

看过Vuetify: How to preselect active tab? 但没有一个答案有效。

更新

再看一遍后发现active_tab: `${route().current()}`,总是设置为错误的 URL。例如，当在 invoices 路由上时，它仍然返回项目的 url。所以它与ziggy有关。

我正在尝试使用 vuetify 减少行之间的巨大差距，但无法减少。我也尝试使用 css 和 vuetify 间距，但不起作用。

预期形式

实际形式

我有 2 个 v-tab，其中数据是动态更新的。有时，如果出现大量数据，则在选项卡之间切换需要很长时间。在每个选项卡中，我将根据响应创建输入字段和文本区域。因此，如果响应如此巨大，我需要创建许多需要很长时间才能呈现的字段。有没有办法优化这一点，我试图在切换选项卡时保留一个加载器，但不知道 dom 何时加载完成。vue中有生命周期事件来处理吗？我尝试使用“nextTick”更新（）事件，但它在渲染之前被调用。