Vuetify - show text inside a switch

Viewed 1244

"Yes" text should show when turn on the switch and "No" text should show when turn off the switch.

enter image description here

1 Answers

Here the solution which I found.

----- My Component -----

<v-switch v-model="resolve" inset dense color="success">
  <template #prepend>
    <p class="small">Solved?</p>
  </template>
</v-switch>

----- Insert Text (YES/NO) from Styles -----

.v-input.v-input--switch--inset .v-input--switch__track:after {
    content: "No";
    color: #333333;
    font-size: 10px;
}

.v-input.v-input--switch--inset.v-input--is-label-active.v-input--is-dirty .v-input--switch__track:after{
   content: "Yes";
   color: #28A745;
}
Related