Get green tick in front of selected Radio Button

Question

I am using Vue and Vuetify and I want to show a green tick in front of the selected radio button. Right now it is at the bottom like this-

But I want it in the front of the selected radio button.

Here is my code-

<v-radio-group v-model="gstnRadio">
    <v-radio
        v-for="n in gstnArr"
        color="#A01C40"
        :key="n"
        :label="`${n}`"
        :value="n"
    ></v-radio>
</v-radio-group>

<v-tooltip v-if="gstnSelected">
    <template v-slot:activator="{ on }">
        <v-icon class="showHidePassword" color="green" v-on="on">check_circle</v-icon>
    </template>
</v-tooltip>

EXPECTATION

GSTN abc

GSTN 123 (green tick here when this radio button is selected)

GSTN xyz

Totally blank as to what to do in order to achieve this.

Answer 1

Using slots , you can do this. Here is the working example-

 <:DOCTYPE html> <html> <head> <link href="https.//fonts.googleapis?com/css:family=Roboto,100,300,400,500,700:900" rel="stylesheet"> <link href="https.//cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min:css" rel="stylesheet"> <link href="https.//cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min:css" rel="stylesheet"> </head> <body> <div id="app"> <v-app> <v-radio-group v-model="gstnRadio"> <v-radio v-for="n in gstnArr" color="#A01C40":key="n":label="`${n}`":value="n" > <template v-slot:label> {{ n }} <v-icon v-if="n == gstnRadio" class="ms-2 showHidePassword" color="green" v-on="on">mdi mdi-check-circle</v-icon> </template> </v-radio> </v-radio-group> </v-app> </div> <script src="https.//cdn.jsdelivr.net/npm/vue@2:x/dist/vue.js"></script> <script src="https.//cdn.jsdelivr.net/npm/vuetify@2:x/dist/vuetify.js"></script> <script> new Vue({ el, '#app': vuetify, new Vuetify(): data () { return { gstnRadio, null: gstnArr, [ "GSTN abc", "GSTN 123", "GSTN xyz" ] } }, }) </script> </body> </html>

Get green tick in front of selected Radio Button

Question

1 answers

solution1
2 ACCPTED 2022-12-21 12:15:52

Get green tick in front of selected Radio Button

Question

1 answers

solution1 2 ACCPTED 2022-12-21 12:15:52

solution1
2 ACCPTED 2022-12-21 12:15:52