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.

Answer 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