如何通过Vue道具中的对象传递HTML和特殊字符

Question

我正在构建一个组件，该组件应该显示我通过道具传递的单词词典。

我传递了一系列单词及其描述。问题是，我也想在描述中有链接。根据我提出的文档：

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

在组件本身中，我遍历这个数组，并显示一个很好的字典，其中包含按单词分组的单词。

当我想做这样的事情时，问题就出现了：

<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'}]"

有两个问题：

• 将HTML作为描述的一部分传递
• 在B的描述中使用CCD_ 1字符被注册为描述字符串的末尾

如何解决此问题？

Answer 1

将HTML作为描述的一部分传递

您可以通过Vue组件中的v-HTML注入HTML，只需传入一个HTML字符串。

在B的描述中使用'字符将被注册为描述字符串的末尾。

您可以使用转义HTML字符串值中的'字符

请查看此沙盒演示以获取工作演示。