Vue 3 渲染动态评论

Question

如何在 Vue 3 中正确呈现动态评论？我尝试了在我的情况下不起作用的 v-html，例如，https://i.imgur.com/EtrVmGu.png

<template>
  <!-- Method 1: not working properly, https://i.imgur.com/EtrVmGu.png -->
  <template v-html="COMMENT" />

  <!-- Method 2: does not solve the problem, print as string -->
  {{ COMMENT }}

   content here

 <!--[if mso | IE]> </span> <![endif]-->

</template>

<script>
export default {
  setup() {
    const COLOR = "#FF0000";
    const COMMENT = `<!--[if mso | IE]> <span style="background: ${COLOR}"> <![endif]-->`;

    return {
      COMMENT
    }
  }
}
<script>

<div v-html=""> 不会解决问题，请参阅：https://i.imgur.com/6tqaQAe.png

Answer 1

这对我有用。

<template>
  <h1>Dynamic Component</h1>
  <div v-html="COMMENT"></div>
</template>

<script>
export default {
  setup() {
    const COLOR = "#FF0000";
    const COMMENT = `<span style="background: ${COLOR}">Comment</span>`;
    return {
      COMMENT,
    };
  },
};
</script>

Answer 2

您也可以使用带有<component is> 的动态组件 Vue JS Dynamic Components

并将所有评论组件代码放在不同的文件中：comment.vue

<template>
  <h1>Dynamic Component</h1>
  <component :is='currentComponent'>
</template>

<script>
import CommentComponent from './comment.vue'
export default {
  computed: {
    currentComponent() {
      // do some logic then
      return CommentComponent
    }
  }
};
</script>

Answer 3

v-html 应该安装在真实的 html 标签中，而不是虚拟的 template：

  <div v-html="COMMENT" ></div>

你可以在被检查的 DOM 中看到评论