Vuetify中VMenu内VBtn不可见问题求助

问题根源 #

你错误使用了VBtn的text属性：在Vuetify中，text是布尔型属性，用于将按钮设置为无背景、无边框的文本按钮样式，而非传入按钮文本内容。你当前把翻译后的文本绑定到:text上，会被Vue转为布尔值true，触发文本按钮样式；再加上VAppBar是dark模式，按钮color="primary"与背景色一致，最终导致按钮的文本和边框完全不可见，但元素本身仍存在，所以会占用空间且hover交互正常。

修复方法 #

将按钮文本通过默认插槽或label属性传入，同时根据需求调整样式：

方法1：使用默认插槽（推荐）

<VBtn color="primary" v-bind="props">
  {{ t('your.account') }}
</VBtn>

方法2：使用label属性

<VBtn color="primary" v-bind="props" :label="t('your.account')" />

可选优化：文本按钮样式

如果确实需要无背景的文本按钮，可保留text属性，但要调整颜色保证对比度：

<VBtn color="white" text v-bind="props">
  {{ t('your.account') }}
</VBtn>

修改后按钮即可正常显示文本和样式。

内容的提问来源于stack exchange，提问作者radek wilo