[Vuejs]-How to render a node mixing functional component and html string?

by

1👍

You’re going to have to wrap your html in an element. There’s no way around it as far as I know. The tag is a required parameter. Then as you mentioned, feed the actual html string to domProps. After that, it’s just a matter of calling your render function (h in this case) on each of your children in the order you want (see the uicell component below.

const html = 'My<br>Value';

Vue.component('yourhtml', {
  functional: true,
  render(h, context) {
    return h(
      'span',
       { domProps: { innerHTML: html } },
    )
  },
})

Vue.component('reslabel', {
  functional: true,
  render(h, context) {
    return h(
      'span',
      {
      	class: 'responsive-label' 
      },
      'MyLabel',
    )
  },
})

Vue.component('uicell', {
  functional: true,
  render(h, context) {
    return h(
    	'div',
      {
      	class: 'ui-cell' 
      },
      [h('reslabel'), h('yourhtml')]
    );
  }
}),

new Vue({
  el: "#app",
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <uicell></uicell>
</div>
👤Steven B.

Leave a comment