How to render objects inside a string vue2

Question

In Vue2, I have a string along the lines of the following in my component.

<template>
    <div><h1>Hello World</h1>
    <div v-html="testString"></div>
    </div>
</template>
<script>
    export default {
        name: "test-component",
        props: ['incoming'],        
        data: function() {
            return {
                testString: "";
            }
        },
        created() {
            this.testString = this.incoming;
        }
    }
</script>

And then when I do the following (with all the imports done correctly)

<template>
    <text-component :incoming="mycontent"></text-component>
</template>
<script>
import 'test-component' from './path/to/test-component.vue'
export default { // etc, just presume this bit is right, it's only psudo code
components: ['test-component'],
data() { return { mycontent: '' }},
created() {
    this.mycontent="I just want to <router-link to='/home' v-html='Go Home'></router-link>"
</script>

So now I want the first template with testString to render the <router-link> as if I had put it in myself directly.

I've tried v-html and {{ }} , in my test-component but I think i'm missing something. I'm pretty sure in Vue1 I would use {{{ }}}.

Can anyone help out? Thanks.

<text-component> should be <test-component>.... it's the passing on the router-link from a string that I'm struggling with. — Pauly Pops
– Pauly Pops, Commented Sep 1, 2017 at 16:34
In that case, please use the edit link at the bottom left corner of the post to update the question — thanksd
– thanksd, Commented Sep 1, 2017 at 16:48

tony19 · Accepted Answer · 2022-07-16 00:20:13Z

1

From the documentation on v-html:

Note that the contents are inserted as plain HTML - they will not be compiled as Vue templates.

You should be using a slot instead.

Add the slot to your testComponent:

<template>
  <div><h1>Hello World</h1>
  <slot></slot>
</template>

And then just put the content right in the test-component tag:

<template>
  <test-component>
    I just want to <router-link to='/home' v-html='Go Home'></router-link>
  </test-component>
</template>

edited Jul 16, 2022 at 0:20

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Sep 1, 2017 at 16:46

thanksd

55.9k23 gold badges167 silver badges155 bronze badges

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

Collectives™ on Stack Overflow

How to render objects inside a string vue2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related