[Vuejs]-Get green tick in front of selected Radio Button

by

3👍

✅

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>
👤Neha Soni

Leave a comment