Получить зеленую галочку перед выбранной радиокнопкой

Я использую Vue и Vuetify и хочу показать зеленую галочку перед выбранным переключателем. Прямо сейчас это внизу, как это-

Но я хочу, чтобы это было перед выбранным переключателем.

Вот мой код-

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

ОЖИДАНИЕ

GSTN abc

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

GSTN xyz

Совершенно пустой, что делать, чтобы достичь этого.

vue.js vuetify.js radio-group

21.12.2022 12:42

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используя слоты, вы можете это сделать. Вот рабочий пример-

<!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" 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/[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>

21.12.2022 13:15

Другие вопросы по теме

Компоненты Vuetify 3 не работают в chrome - Uncaught TypeError: globalStack.at не является функцией

Есть ли возможность указать, какой элемент выбрать первым, когда v-slide-group является «обязательным»?

Как заставить vuetify v-autocomplete вести себя как панель поиска?

Как использовать реализацию hijri datepicker в приложении vue3?

Свойство или метод «$store» не определен в экземпляре, но на него ссылаются во время рендеринга в Vuex

Как изменить цвета флажка выбранного компонента в Vuetify 3?

Плагин прогресса Vue Webpack

Uncaught TypeError: невозможно прочитать свойства неопределенного (чтение «расширить»)

Ошибка в обработчике v-on (Promise/async): «ReferenceError: форма не определена»

Vuetify 3 v-list — добавьте значок, если элемент v-list активен

Получить зеленую галочку перед выбранной радиокнопкой

Ответы 1

Другие вопросы по теме

Похожие вопросы