VUE.JS createElement — как использовать html entities в render-функции?

Question

[marsdenden]

Суть в чем - создал компонент. Необходимо использовать фукнцию render, так как возможностей template не хватает (сложная логика рендеринга). Столкнулся с тем, что, когда пытаюсь через свойства передать некий текст для отображения - все нормально до тех пор, пока не использую html entities и просто html. Это в случае рендеринга по шаблону, предложенному в документации

render: function (createElement) {
  return createElement('div', {}, ['blabla']) // нормально
}

render: function (createElement) {
  return createElement('div', {}, ['blabla ']) //ненормально (для меня), прямо так и выводит
}

Чтобы вывести html, можно использовать domProps

render: function (createElement) {
  return createElement('div', {domProps:{innerHTML:'blabla '}}, []) //нормально
}

и все бы ничего, но в таком варианте полученный vnode оказывается последним - все дочерние элементы просто пропадают, то есть такая конструкция

render: function (createElement) {
  return createElement('div', {domProps:{innerHTML:'blabla '}}, [
    createElement('div', 'child div1'),
    createElement('div', 'child div2'),
  ]) 
}

не выведет два дива в корневом. Как это объехать? Чтобы и html можно было использовать и дочерние элементы не терялись? Можно, конечно, извращаться путем вложения лишних тэгов span, но хотелось бы избежать лишних элементов.
Пример здесь

Answer 1

[Klein Maximus]

Необходимо использовать фукнцию render, так как возможностей template не хватает

Я сомневаюсь, что Вы использовали прямо все возможности шаблонов, и что рендер-функция так уж необходима. Скорее всего можно декомпозировать Ваш компонент на более мелкие и тогда логика станет проще. Но, это, конечно, зависит от задачи. Может быть в Вашем случае использовании рендер-функции необходимо.

все дочерние элементы просто пропадают,

Это логично! innerHTML просто перезаписывает всё дерево детей компонента.

Можно, конечно, извращаться путем вложения лишних тэгов span

Ну, только такой вариант :) При использовании директивы v-html тоже пришлось бы оборачивать свой html-код в тег.

Comments

[marsdenden]

В общем-то вы правы ))
Нужен был некий базовый компонент вида input. Соответственно необходимо было рендерить input в разных вариантах для type="checkbox" - стандартный и в виде стилизованного ползунка с label и без. После реализации в виде render-функции и внимательного разглядывания того, что получилось, пришло понимание, как это можно было сделать в виде шаблонов. Другое дело, что шаблон был бы перегружен v-if и, соответственно, генерил был лишние ноды-комментарии, рендер позволяет выдавать более чистый код. Ну и дальнейшее развитие компонента в рендер функции может быть проще, поскольку код декомпозировать, особенно в стиле composition api, несколько проще. Ведь кроме checkbox планируется развитие такого инпута, для ввода текста, с возможностью выбора вроде select, маскируемый ввод чисел, ну и много чего еще. Страшно представить, во что может превратиться такой шаблон.
Просто не ожидал что на рендере структуры вида

<div>
некий&nbsp;текст&nbsp;<input>
</div>

можно споткнуться. Ну или я что-то пропустил.
В общем-то, span оказался не таким уж плохим решением ))

[Klein Maximus]

marsdenden, ну раз пойдете по пути render-финкции, то осталось только подключить JSX... и перейти на React :)

[Klein Maximus]

<div>
некий&nbsp;текст&nbsp;<input>
</div>

marsdenden, а может быть тогда стоило бы такой контент передавать через слоты, а не пропсы?

[marsdenden]

Klein Maximus, еще и реакт изучать... уже сил не хватит ))
а насчет слотов - по большому счету   не передается в качестве контента, а вставляется в самой рендер-функции