M
M
marsdenden2020-02-03 20:36:54
Vue.js
marsdenden, 2020-02-03 20:36:54

VUE.JS createElement - how to use html entities in render function?

An essence in what - created a component. It is necessary to use the render function, since the template capabilities are not enough (complicated rendering logic). Faced with the fact that when I try to transfer some text for display through the properties, everything is fine until I use html entities and just html. This is in the case of rendering according to the template proposed in the documentation

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

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

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

and everything would be fine, but in this case, the resulting vnode turns out to be the last one - all child elements simply disappear, that is, such a construction
render: function (createElement) {
  return createElement('div', {domProps:{innerHTML:'blabla '}}, [
    createElement('div', 'child div1'),
    createElement('div', 'child div2'),
  ]) 
}

will not display two divs in the root. How to get around it? So that html can be used and child elements are not lost? You can, of course, pervert by nesting extra span tags, but I would like to avoid unnecessary elements.
Example here

Answer the question

In order to leave comments, you need to log in

1 answer(s)
K
Klein Maximus, 2020-02-16
@marsdenden

It is necessary to use the render function, as template capabilities are not enough

I doubt that you have directly used all the features of the templates, and that the render function is so necessary. Most likely, you can decompose your component into smaller ones and then the logic will become simpler. But, of course, it depends on the task. It may be necessary in your case to use the render function.
all child elements just disappear,

This is logical! innerHTMLsimply overwrites the component's entire child tree.
You can, of course, pervert by nesting extra span tags

Well, only this option :) When using the v-html directive , you would also have to wrap your html code in a tag.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question