Всем привет!
Подскажите как добавить определенный класс в зависимости от значения 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 равно значению строки (выбора), то этой строке нужно дать определенный класс
я попытался задать класс, но выходит ерунда
