Блог

Я создал пользовательский радиокомпонент, который выглядит следующим образом

родительский

 <Radios :options='groups' v-model='form.group'/>
  

и компонент выглядит следующим образом

 <template>
  <div class=" mx-auto py-8 pb-6 pl-2 pr-2 flex justify-space-between justify-between flex-wrap">
    <label for="option.id" class="w-50 mh-3 bg-white rounded-lg shadow-mb-custom p-6 hover:cursor-pointer mb-8 hover:bg-orange-100 focus:outline-none focus:shadow-outline-orange focus:bg-outline-orange" tabindex="0" v-for="option in options">
      <input
        type='radio'
        id="option.id"
        @click="setActive"
        class='form-radio hidden'
        name='Groups'
        :value='options.id'
      />
      <div class="flex font-semibold justify-space-between justify-between items-center mb-3">
          <h1 class="uppercase text-base tracking-wide">{{option.title}}</h1>
          <div class="ml-2">
           <CheckedSVG />
          </div>
      </div>
      <div class="mb-1 text-base">
        <span>text </span>
        <span>{{option.max_allowed_attenders - option.registrations}}</span>
      </div>
    </label>
  </div>
</template>

<script>
export default {
  name: 'Radios',
  props: ['options', 'selected'],
  methods: {
    setActive () {
      this.$emit('input', this)
    }
  }
}
</script>
  

и я хотел бы установить класс на ярлыке, если элемент активен. Как бы я это сделал в VueJS?

Вы можете сделать это таким образом:

  <label class="class-a" :class="{class-b: isActive}">
  

если свойство данных isActive равно true, <label class="class-a class-b"> будет отображаться, а если isActive равно false <label class="class-a"> , будет отображаться. Вы можете прочитать больше здесь https://v2.vuejs.org/v2/guide/class-and-style.html