Конфликт рендера у VueJS и Semantic UI — как разрешить?
Проект под NDA, поэтому не могу ничего показать.
Проблема вот в чем: есть модальное окно, в котором в таблице выводятся строки. В этих строках находятся разные input, textarea, checkbox, select и т.д., каждый из них стилизуется с помощью Semantic UI.
Когда запускаю модальное окно, VueJS заполняет эту таблицу с помощью v-for, а некоторые элементы с помощью v-if
Как я понял, сначала семантик создает модальное окно и элементы, а потом уже VueJS рендерит списки.
В итоге, модальное окно неправильно рассчитано по своей высоте (влияние рендера списков). Это исправляется при ресайзе окна, т.е. Semantic при ресайзе опять рассчитывает параметры модального окна и уже с готовым списком все правильно вычисляет.
Такая же проблема с рендером элементов: сначала Semantic раздает им стили, но так как v-if не показывает изначально эти элементы, то и Semantic их не видит. А далее VueJS рендерит и в итоге все рендерится в нативных стилях браузера (то что с помощью JS рендерится).
Соль не в рендере таблицы, а в том, что она в модальном окне.
Semantic создает модальное окно из расчета, что там нет тех строк, которые будут отрендерены.
Тут надо каким-то образом сначала сделать работу VueJS, а потом уже показывать модальное окно.
D' Normalization: проблемес решил с кривостью модального окна решил добавлением таймаута в 100мс. Но это пока, надо будет как-то решить. Вот в ES6 есть промисы и это преимущество Angular2 на TypeScript.
Но что делать с чекбоксами и селектами - они Семантиком с помощью JS создаются только при начальном рендере страницы, а надо чтоб создавались еще и потом
D' Normalization: за nextTick() спасибо.
в примере нет вещей, которые создаются в JS
Например, тот же селект. При рендере страницы JS находит с нужными классами и заменяет его на кастомный селект.
Когда VueJS создает этот select, то Semantic о нем не знает и оставляет как есть, т.е. на него работают только стили.
Денис Букреев: с этим и дальше будут проблемы. Сам сталкивался с проблемой свзяки vue+bootstrap+jquery. Приходилось пилить много костылей чтобы оно работало как надо.
Лучше обратится на форум vuejs или в их чат, там должны помочь.
Денис Букреев: v-show - Это та же проверка с той разницей, что if не вставляет блок в тело страницы в случае false, а show вставляет его с display:none (v-else также можно использовать). Может семантик уи его обработает при этом, если тот будет в страницу вставлен, пускай и невидимый
Простой
