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

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

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

Первое — 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 не понимает, что у свойства изменилось значение и компонент радио инпута нужно отрендерить заново

рубрики: VUE JS | Комментарии (0)

16 Июнь 2022

Дружим JQuery Bootstrap Tooltip и Vue JS с помощью кастомной директивы

В продолжении предыдущей статьи, уже в собственном авторстве как элемент модуля

В отдельном файле

В vue компоненте импортируем этот файл (путь вставляем свой)

добавляем соответствующую опцию

и используем как обычную директиву vue

в моём случае

Дока по директивам

рубрики: VUE JS | Комментарии (0)

15 Июнь 2022

Дружим JQuery Styler и Vue JS в реализации 1С Битрикс API

Всем привет!
Очень давно не писал — просто некогда. В отличие от времени когда я работал админом, сейчас, работая веб программистом свободного времени практически нет — всегда есть работа, которую нужно работать 🙂

Само по себе решение дружбы JQuery Styler и Vue JS конечно не лучший вариант, в идеале вообще нужно выкинуть JQuery и реализовать фронт на чистом Vue…
Но когда вёрстка собрана на JQuery + Styler, соответственно со стилями «подогнанными» под Styler то на подбор нужных компонентов и их стилизация потребуется довольно много времени (по крайней мере у меня т.к. готовых подобных решений я не нашел).

Проблема — при обновлении поля значение в модели не обновляется, хотя поле прикручено к модели через v-model.
Решение — в vue mounted() вешаем на изменения объекта styler-а vue метод обновления значения поля в модели + в моей реализации далее прокидываем из дочернего компонента родителю с помощью $emit

В реализации API 1С Битрикс компонент оборачиваем в BX.Vue.component()

Пример реализации для чекбокса

Далее уже в шаблоне основного компонента используем пользовательский vue тег данного компонента с штатной директивой v-model для связывания поля ввода и с переменной

На авторство не претендую — компоненты реализованы в одном из проектов веб студии Слон, где я в данный момент удалённо работаю.

PS
Добавлю реализацию для выбора даты

рубрики: Bitrix, Javascript - JQuery, VUE JS | Комментарии (0)