Привет! Кто нибудь делал вью компонент радио кнопки с кастомной иконкой? Не

Question

Vue.js — русскоговорящее сообщество

Mikhail

Привет! Кто нибудь делал вью компонент радио кнопки с кастомной иконкой? Не

пойму как получить значение, по которому показывать или скрывать эту иконку

#frontend #javascript #programming #russian #vue.js

0

02.10.2021

14 ответов

11 просмотров

Mikhail Автор вопроса

Igor Tuyakpaev
ну можно в валью компонента передавать массив выбр...

Не, я про то что вот у меня сам компонент кнопки. Хочется как то получать значение isActive, чтобы показывать отмеченную радио кнопку. Можно конечно передавать выбранное значение с родительского компонента и уже внутри сравнивать с value компонента кнопки, но мне кажется это костыль какой то <template> <label :class="['radio-button', { 'radio-button--disabled': disabled }]"> <div :class="[ 'radio-button__frame transition-all', { 'radio-button__frame--round': round, 'radio-button__frame--selected': isActive, }, ]" > <Icon class="radio-button__frame__check-mark-icon" v-if="isActive" name="checkMark3" size="13px" /> <input v-model="radioValue" type="radio" :id="id" :value="value" :name="name" /> </div> <span class="radio-button__label" :style="[ $q.lang.rtl ? { marginRight: indentLabel } : { marginLeft: indentLabel }, ]" v-if="label" > {{ label }} </span> </label> </template> <script> export default { name: 'RadioButton', props: { label: { type: String, default: null }, indentLabel: { type: String, default: '8px' }, round: { type: Boolean, default: false }, disabled: { type: Boolean, default: false }, name: { type: String, default: null }, isSelected: { type: Boolean, default: false }, id: { type: Number, default: null }, value: { type: [Number, String], default: null }, }, computed: { radioValue: { get() { if (this.isSelected) { this.$emit('change', this.value) return this.value } else { return null } }, set(value) { this.$emit('change', value) }, }, }, } </script>

0

02.10.2021

Igor Tuyakpaev

Mikhail
Не, я про то что вот у меня сам компонент кнопки. ...

Есть еще общий компонент радио списка, да?

0

02.10.2021

Evil

Mikhail
Не, я про то что вот у меня сам компонент кнопки. ...

v-model лучше тут уже использывать

0

03.10.2021

Mikhail Автор вопроса

Evil
v-model лучше тут уже использывать

как тут слотв и v-model помогут?

0

03.10.2021

Evil

Mikhail
как тут слотв и v-model помогут?

Вам же требуется состояние кнопки ?

0

03.10.2021

Evil

Mikhail
как тут слотв и v-model помогут?

ListItems подписываетесь v-model а от ListItem emit

0

03.10.2021

🎅

Mikhail
Не, я про то что вот у меня сам компонент кнопки. ...

isSelected: { type: Boolean, default: false }, value: { type: [Number, String], default: null }, radioValue: { у тебя три поля задают значение, тебя это не смущает?

0

03.10.2021

Aleksey German

А чем v-model не нравится в родителе? У меня так чекбоксы настроены через v-model родителя и компьютед в дочернем

0

03.10.2021

Mikhail Автор вопроса

Aleksey German
А чем v-model не нравится в родителе? У меня так ч...

И как это с радио кнопками будет выглядеть?

0

03.10.2021

Mikhail Автор вопроса

Evil
ListItems подписываетесь v-model а от ListItem emi...

Не понимаю. Что значит подписаться на v-model в ListItems?

0

03.10.2021

Aleksey German

Mikhail
И как это с радио кнопками будет выглядеть?

Не понятен вопрос в такой постановке

0

03.10.2021

Evil

Mikhail
Не понимаю. Что значит подписаться на v-model в Li...

Проще говорю компонент обертку для радиокнопок должен у вас содержать всю информацию какие сейчас активны кнопки

0

03.10.2021

Mikhail Автор вопроса

🎅
isSelected: { type: Boolean, default: false }, ...

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

0

03.10.2021

Igor Tuyakpaev · Accepted Answer

Igor Tuyakpaev

ну можно в валью компонента передавать массив выбранных значений, и иконку по value.indexOf(current_jtem)

0

02.10.2021

169 похожих чатов

Привет! Кто нибудь делал вью компонент радио кнопки с кастомной иконкой? Не

14 ответов

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