Within my Vue2 component, I am working with a string that looks something like this:
<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>
After setting up the imports properly, I include the following in another template:
<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>
Now, my goal is for the first template with testString to display the <router-link> as if I had manually inserted it.
I have attempted using v-html and {{ }}, within my test-component but it seems like I may be overlooking something. In Vue1, I believe I would utilize {{{ }}}.
If anyone can provide guidance on this issue, I would greatly appreciate it. Thank you.