Vuetify v-radio label got broken after using label slot once

user_1892335 0
Viewed 306

Context:

I've decided to create a v-radio button with v-text-field as a label for it.

I used the label slot like this:

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

Problem:

This is the output that I got when applying the previous code snippet:

enter image description here

Additional Info:

I checked another normal radio button in the project (which is copied from Vuetify docs)

The code is as follows:

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

Here is the output for that code:

enter image description here

Question:

Is there a way to get a normal radio button with input text without having two radio button "circles"?

Vuetify version: ^2.4.5

vuetify.js vue.js
1 Answers

Finally, I got it fixed after digging for hours I realized that I have tree-shaking enabled in my Vuetify. I mean I was importing Vuetify like this

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

Vue.use(Vuetify)

export default new Vuetify()

I changed it back to

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

Vue.use(Vuetify)

export default new Vuetify()

after that, it worked always as expected. I still don't know how to get it fixed with tree-shaking enabled.

user_18923350
Related