[英]How to pass HTML and special characters with an object in Vue props
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:有2个问题:
'
character in B's description is registered as an end of the description string.'
字符被注册为描述字符串的结尾。 How can I solve this?我该如何解决这个问题?
passing HTML as part of description
通过 HTML 作为描述的一部分
You can inject HTML through v-html in Vue components, simply pass in a HTML string.您可以通过v-html在 Vue 组件中注入 HTML,只需传入一个 HTML 字符串即可。
using ' character in B's description is registered as an end of the description string.
在 B 的描述中使用 ' 字符被注册为描述字符串的结尾。
You can escape the '
character in the HTML string value using \
您可以使用
\
转义 HTML 字符串值中的'
字符
Please check this sandbox demo for a working demo.请查看此沙盒演示以获取工作演示。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.