Производство фотообоев в Новосибирске. Интернет магазин фотообоев. Изготовление - один день! Каталог 10 000 изображений!
11 Январь 2023

VUE как отменить ввод в input radio

posted in VUE JS |

Кейс — есть радио инпут, нам нужно спросить у юзера реально ли он хочет переключить значение? если нет — не переключаем
В моём случае радио инпут реализован в виде отдельного компонента.

Первое — v-model = item.value заменяем на биндинг значения :value = item.value и событие смены @change = changeValue(item, $event)) с передачей в него значения и непосредственно события $event

далее в методе changeValue(item, event) я сохраняю текущее и новое значения (конечно предварительно добавляем currentItem и eventItem в data)
this.currentItem = item (в this.currentItem ссылка на item)
this.eventItem = event (в this.eventItem ссылка на event)

и уже по результатам выбора пользователем в модальном окне либо изменяю значение
this.currentItem.value = this.eventItem

либо оставляю тоже самое
this.currentItem.value = JSON.parse(JSON.stringify(this.currentItem.value))

ВНИМАНИЕ!
тут небольшой лайфхак в виде переприсвоения самому себе такого же значения, но с обновлением ссылки!
this.currentItem.value = JSON.parse(JSON.stringify(this.currentItem.value))
иначе Vue не понимает, что у свойства изменилось значение и компонент радио инпута нужно отрендерить заново

Оставить комментарий