How can I render component as data attribute in VueJS

Question

For example I have a template and some other <my-component>:

template: '<i data-toggle="popover" data-html="true" data-content="**Here I need render another  component in loop**"></i>'

This

 :data-content="<my-component v-for... ></my-component>"

doesn't work. Perhaps there is a method to render my-component in another place ? In computed area... or in methods ?

So, how can I render component in html data-*attributes ?

Thank you.

What's the reason to have HTML inside data attribute? If you really need it, try to insert plain html string, not as a component. But it looks super invalid — Anarion
– Anarion, Commented Jul 26, 2018 at 11:48

IVO GELOV · Accepted Answer · 2018-07-26 13:00:22Z

1

You will have to convert your component to be functional. Read Introduction to Vue.js Render Functions and Render Functional Components in Vue.js

answered Jul 26, 2018 at 13:00

IVO GELOV

14.3k1 gold badge21 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

zalex Over a year ago

Wich exactly component should I to convert ? Do I have to remove <my-component> and move it's functionality to the render function in my parent component ?

IVO GELOV Over a year ago

You should convert the component which you want to put inside the data-content attribute. The new functional component will be returning a DOM-fragment so you can easily get its innerHTML.

zalex Over a year ago

Sorry for the my arrogance, but can You illustrate it, very briefly, I can not understand some things and my English does not allow me a more specific question. Thank You.

IVO GELOV Over a year ago

Hm, it seems that it would be simpler for you to avoid mixing Vue and jQuery stuff. If you insist on doing so perhaps you can have <my-component ref="my"> somewhere inside your parent with v-show="false" and then inside the mounted() handler get the this.$refs.my.innerHTML and provide it to the data-content attribute of your popover. But this is too hacky - you'd be better stick with pure Vue-compatible components.

Collectives™ on Stack Overflow

How can I render component as data attribute in VueJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related