CODEWITHSUNDEEP
vue.js
David
David

Reputation: 266

How to render a node mixing functional component and html string?

I've got a functional component which need to render a child component (functional too) and an html string sibling to him in the same node.

Following this piece of code:

const html = 'My<br>Value';
const ResponsiveLabel = render('span', { class: 'responsive-label' }, 'MyLabel:');

return render('div', { class: 'ui-cell' }, [ ResponsiveLabel, html ]);

It should render this html code:

<div class="ui-cell">
  <span class="responsive-label">MyLabel:</span>
  My<br>Value
</div>

In this case, My<br>Value will just be interpreted as text, <br> will be visible.

My goal is to render the ResponsiveLabel and const html as html.

To do it with CreateElement function, we have to use the prop. domProps like this:

render('any', { domProps: { innerHTML: html } });

Which will result as a well interpreted html string, and <br> will make a carriage return.

But i don't know how to render this html with ResponsiveLabel before...

I can't do that

const html = render(undefined, { domProps: { innerHTML: 'My<br>Value' } });
const ResponsiveLabel = render('span', { class: 'responsive-label' }, 'MyLabel:');

return render('div', { class: 'ui-cell' }, [ ResponsiveLabel, html ]);

Or even:

const ResponsiveLabel = render('span', { class: 'responsive-label' }, 'MyLabel:');

return render('div', {
    class: 'ui-cell',
    domProps: { innerHTML: 'My<br>Value' }
  }, [ ResponsiveLabel ]);

How can i reach my goal ?

EDIT: it seems not possible. If we use render function, we have to use a tag. So I need to use one for my html string.

Upvotes: 0

Views: 934

Answers (1)

Steven B.
Steven B.

Reputation: 9372

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>

Upvotes: 1

Related Questions