How to pass HTML and special characters with an object in Vue props

Question

I am building a component which should display a dictionary of words that I pass through the props.

I pass an array of words and their descriptions. The problem is that I also want to have links in the descriptions. Following the docs I came up with this:

<Dictionary v-bind:entries="[{word: 'A', description: 'A letter A'}, {word: 'B', description: 'A letter B'}]"

In the component itself, I iterate through this array and display a nice dictionary with words grouped by words.

The problem arises when I want to do somthing like this:

<Dictionary v-bind:entries="[{word: 'A', description: 'A letter A. Read more <a href="www.lettera.com">here</a>'}, {word: 'B', description: 'A letter B. It's awesome'}]"

There are 2 problems:

• passing HTML as part of description
• using ' character in B's description is registered as an end of the description string.

How can I solve this?

Answer 1

passing HTML as part of description

You can inject HTML through v-html in Vue components, simply pass in a HTML string.

using ' character in B's description is registered as an end of the description string.

You can escape the ' character in the HTML string value using \

Please check this sandbox demo for a working demo.