将全局 CSS 应用于注入的 HTML (v-html)

Question

我正在尝试使用 Vue 从我的数据库中注入 HTML。 我能够成功注入 HTML，但是我遇到的问题是我的框架样式表（Vuetify）没有被应用。
它应用于页面的其余部分，而不是注入的 HTML。

如何获取注入的 HTML 以使用我的 Vuetify CSS？

此外，虽然我在检查 HTML 时可以看到它们，但我的 HTML 中的图像也没有呈现。

<div v-html="post.format"></div>

输出 HTML：

<div>
  <v-container grid-list-md="" text-xs-center="">
    <v-layout row="" wrap="">
      <v-flex xs12="" md12="" lg6="">
        <p class="text-lg-left">Post description text</p>
      </v-flex>
      <v-flex xs12="" md12="" lg6="">
        <v-img class="center" style="max-width:250px" src="/img/1.jpg"></v-img>
      </v-flex>
    </v-layout>

  </v-container>

  <v-container grid-list-md="" text-xs-center="">
    <v-layout row="" wrap="">
      <v-flex xs12="" md12="" lg6="">
        <v-img width="250px" class="center" src="/img/2.jpg">
        </v-img>
      </v-flex>
      <v-flex xs12="" md12="" lg6="">
        <p class="text-lg-left">More post description text</p>
      </v-flex>
    </v-layout>
  </v-container>
</div>

Answer 1

正如@Husam 提到的，Vue 不允许你这样做。 它最终是最好的，甚至应该谨慎使用v-html。 关于 css，来自 Vue.js 网站：

在单文件组件中，作用域样式不适用于 v-html 中的内容，因为 Vue 的模板编译器不会处理该 HTML。 如果您想使用范围 CSS 来定位 v-html 内容，您可以改用 CSS 模块或具有手动范围策略（例如 BEM）的附加全局元素。

至于更好的方法，从您的输出外观来看，我建议将您的纯文本数据存储在数据库/集合中，并为此类帖子制作组件模板。 在你的数据库/集合中，你可以存储标题、描述、imageURL，也许还有一个componentType。 然后，在渲染时，您可以从 db 中存储的内容中渲染特定的组件类型。

这样会更清洁、更安全，也许更容易维护。 我在 CodeSandbox 上创建了我正在谈论的内容的示例。 沙盒正在阻止图像加载，但它就在那里。 我也将您的输出分成两个不同的组件来查看。