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组件？

1 个答案: