Дружим 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
Добавлю реализацию для выбора даты

, ,

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *