How can I pass a in a string in an object as a prop to a child component?

Asked Dec 31 '18 at 18:21

Active Jan 02 '19 at 15:20

Viewed 116 times

Based on what parent component calls the child component (a modal) the text of the modal is be populated with an object passed in as a prop from the parent component.

In one instance, one of the items of the object (modalText) I'm passing in contains a router-link. The element shows up in the console and the text shows up in the browser, but the linking doesn't work.

Parent

modalText: {
  subHeadline: `You can find ${this.name} in the <router-link :to="{name:'PartArea'}">part area</router-link> of your list`,
}

Child (modal)

<h2 v-html="modalText.subHeadline">{{modalText.subHeadline}}</h2>

edited Jan 02 '19 at 15:20

asked Dec 31 '18 at 18:21

CassandraDanger

No. A workable approach would be exposing a slot in your child component. Otherwise you will have to compile that subHeadline somehow. – Bert Dec 31 '18 at 19:06
Figured it out - I'm using i18n for translations, so I used their path and action methods to insert my router link into the middle of this text – CassandraDanger Jan 02 '19 at 17:56
Glad to hear it! – Bert Jan 02 '19 at 18:21

How can I pass a in a string in an object as a prop to a child component?

0 Answers0