nickola105
@nickola105
начинающий

Как присвоить класс в зависимости от значения props во vue?

Всем привет!
Подскажите как добавить определенный класс в зависимости от значения props, т.е.
есть такой дочерний компонент
<template lang="pug">
  ul.gender
    li
      div(id="male" @click="value = 'Мужчина'" :class="[value='Мужчина' ? 'active' : false]") 
      span {{ value }}
    li
      div(id="female" @click="value = 'Женщина'" :class="[value='Женщина' ? 'active' : false]")
      span Женщина
</template>

<script>
export default {
  props: ['value'],
}
</script>

<style lang="scss">
  .gender {
    margin: 0;
    padding: 0;
    list-style-type: none;
    background: #ffffff;
    color: #ccc;
    li {
      display: flex;
    }
  }
  #male, #female {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .2)
  } 
</style>


в него приходит значение value
задача такая если значение value равно значению строки (выбора), то этой строке нужно дать определенный класс

я попытался задать класс, но выходит ерунда
  • Вопрос задан
  • 615 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы