如何将 HTML 写入我的 v-dialog 的 v-card 组件？

Question

我想将我的自定义 HTML 渲染到我的弹出式 v-dialog 组件，但我找不到这样做的方法。

我已经在组件上尝试了 document.write() 但它改变了整个页面的 HTML 而我只想改变弹出窗口的。

<template>
  <div>
    <v-btn class="amber" fab small dark v-on:click.stop="dialog = true">
      <v-icon>message</v-icon>
    </v-btn>
    <v-dialog v-model="dialog" max-width="600px">
      <v-card>
        <v-card-title>Hello</v-card-title>
        <!--<v-card-text>{{showMessage()}}</v-card-text>-->
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialog: false
      }
    },
    methods: {
      showMessage() {
        document.write("<html><head></head><body><h2>Hello.</h2></body></html>")
      }
    }
  }
</script>

      <template v-if="header.value == 'Message'">
        <Popup></Popup>
      </template>

Answer 1

根据 Vue.js 的文档，我发现了这个：

https://vuejs.org/v2/guide/syntax.html

您可以使用 v-html 指令。这是文档中如何使用它的示例：

<p>Using mustaches: {{ namepopup}}</p>
<p>Using v-html directive: <span v-html="namepopup.html"></span></p>

如何将 HTML 写入我的 v-dialog 的 v-card 组件？

How can I write HTML to my v-dialog's v-card component?

html

dialog

popup

vue.js

vuetify.js