將全局 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 上創建了我正在談論的內容的示例。 沙盒正在阻止圖像加載，但它就在那里。 我也將您的輸出分成兩個不同的組件來查看。