CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Coding active
Coding active

Reputation: 1680

VueJS - Generating html string of a component in computed property

I'm looking for a suggestion regarding a cleaner approach to generate a component data as html string and to pass it raw through the props of the component.

component-a.js
import componentB from './component-b'  



computed: {
  tooltipHTML() {
    render "<componentB :name='user1'/>
  }
}

I would prefer something similar to the above idea.

Upvotes: 0

Views: 1152

Answers (1)

Vamsi Krishna
Vamsi Krishna

Reputation: 31362

Generating HTML in a computed property and passing it as props to another component to be rendered in that component will not work.

What you are looking for is Slots

Since the complete code is not provided I guess you wanted to render <componentB :name='user1'/> inside another component( a tooltip component)

You would be doing it as follows using slots:

<tooltip-comp>
    <componentB :name='user1'/>
</tooltip-comp>

In your tooltip component

//tooltip component

<template>
    <div class="my-tooltip">
        <p>my tooltip</p>
        <slot></slot>
    </div>
</template>

Upvotes: 2

Related Questions