Vue JS text interpolation expression returning html or component

Question

How can I render a component inside a template using text interpolation? I tried the following code:

<template>
   <div> {{ booleanValue ? "<my-component />" : "Some Text" }} </div>
</template>

But this is printing the actual code with the "double mustaches", removing the component tag and also rendering the component.

{{ booleanValue ? "" : "Some Text" }}

tony19 · Accepted Answer · 2022-07-16 02:11:24Z

1

I still don't know how to do it with text interpolation, but I found a simpler way to this: Conditional Rendering

 <div v-if="booleanValue"> 
    <my-component /> 
 </div>
 <div v-else>Some Text</div>

tony19

140k24 gold badges281 silver badges354 bronze badges

answered May 24, 2017 at 16:36

dinhokz

9972 gold badges15 silver badges42 bronze badges

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

1 Comment

This is the correct way to do it. Text interpolation is - wait for it - text only. No components.