Vue 组件未突出显示代码语法

Question

我有一个非常简单的 VueJS 应用程序，我的一个组件中有一个 TinyMCE 编辑器，它使用 Prism 突出显示代码语法。在 TinyMCE 编辑器中输入时，代码看起来很好，因为当您在 tinymce 编辑器中编写时，通常 prism 会突出显示语法。我保存所有的 html 代码并将其呈现在不同的组件上。

Vue 组件渲染代码不正确。

我到处搜索，但没有找到任何合适的东西来纠正这个问题。我将向您展示组件代码。

<template>
  <v-row>
    <v-col cols="6">
      <v-card class="blog-data">
        <div v-html="blogs"></div>
      </v-card>
    </v-col>
  </v-row>
</template>

我正在做的是，我从 api 请求数据并保存到 blogs 变量中，然后将其作为原始 html 传递到 vue 组件中。

请告诉我，我在这里做错了什么，以便我可以正确解决这个问题。顺便说一句，我正在尝试嵌入用于博客目的的 html 编辑器，它可以突出显示具有许多格式化功能的代码。我的网站在https://www.springcoders.co.in上可用

Answer 1

我已经解决了这个问题，我们需要做的就是手动将数据分配给组件，然后在 vue 挂载的钩子中我们需要使用 Prism APi Prism.highlightAll() 工作得很好。