Get green tick in front of selected Radio Button-CodePudding

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  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.

CodePudding user response：

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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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"  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/[email protected]/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>