Vuetify v-radio 标签在使用标签槽一次后损坏答案

【问题标题】：Vuetify v-radio label got broken after using label slot onceVuetify v-radio 标签在使用标签槽一次后损坏
【发布时间】：2021-06-10 10:30:01
【问题描述】：

上下文：

我决定创建一个带有 v-text-field 作为标签的 v-radio 按钮。

我是这样使用标签槽的：

<v-radio
  v-for="option in question.options"
  :key="option"
  :label="option"
  :value="option"
>
  <template #label>
    <v-text-field
    label="Test"
    />
  </template>
</v-radio>

问题：

这是我应用之前的代码sn-p时得到的输出：

其他信息：

我检查了项目中的另一个普通单选按钮（从 Vuetify 文档复制而来）

代码如下：

<v-radio
  label="red darken-3"
  color="red darken-3"
  value="red darken-3"
/>

这是该代码的输出：

问题：

有没有办法在没有两个单选按钮“圆圈”的情况下获得带有输入文本的普通单选按钮？

Vuetify 版本：^2.4.5

【问题讨论】：

只是出于好奇，但您将整个代码正确地包装在 <v-app> 中，不是吗？
是的，我确实有一个完整的布局。其他一切都很好。
这很奇怪。您可能添加了一些奇怪的样式，或者给定 Vuetify 版本的单选按钮已损坏。尝试升级/降级版本。
真的很奇怪。我什至没有使用任何样式标签。我以前跑过npm update vuetify -D
你能用小提琴重新创建它吗，我无法使用 vuetify 2.4.5，似乎还可以，检查附加到无线电元素的类

标签： vue.js vuetify.js

【解决方案1】：

最后，我在挖了几个小时后修复了它，我意识到我在 Vuetify 中启用了 tree-shaking。我的意思是我正在像这样导入Vuetify

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify()

我改回了

import Vue from 'vue'
import 'vuetify/dist/vuetify.min.css'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

export default new Vuetify()

之后，它总是按预期工作。我仍然不知道如何在启用 tree-shaking 的情况下修复它。

【讨论】：