如何在 Vue 道具中通過 HTML 和帶有 object 的特殊字符

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

有2個問題：

• 通過 HTML 作為描述的一部分
• 在 B 的描述中使用'字符被注冊為描述字符串的結尾。

我該如何解決這個問題？

Answer 1

通過 HTML 作為描述的一部分

您可以通過v-html在 Vue 組件中注入 HTML，只需傳入一個 HTML 字符串即可。

在 B 的描述中使用 ' 字符被注冊為描述字符串的結尾。

您可以使用\轉義 HTML 字符串值中的'字符

請查看此沙盒演示以獲取工作演示。