Vuetify v-dialog 中的 HTML答案

【问题标题】：HTML in a Vuetify v-dialogVuetify v-dialog 中的 HTML
【发布时间】：2019-08-01 20:56:20
【问题描述】：

我正在尝试将格式化的 HTML 添加到 v-dialog 的内部。我里面有一张 v-card，但我把它撕掉了，所以我可以从头开始。这就是我目前所拥有的

       <v-dialog v-model="dialogPubs" scrollable max-width="950px">      
       <div>{{editedItem.Publication}}</div>
       </v-dialog>

{{editedItem.Publication}} 包含带有颜色变化的格式化 HTML 以及超链接。我已经看到在哪里使用 v-card 和 v-html 的 v-text 应该可以工作，但它不适合我。

我有一个数据表，当我双击一行时，会弹出带有格式化 HTML 的对话框，但我得到的是直接文本。如果我需要把 v-card 放回去，只要我能渲染 HTML 就可以了。谢谢。

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

请仔细检查您如何使用v-html。您需要在将包含 HTML 的元素上使用它，并且需要将其添加为绑定到包含 HTML 字符串的 data 属性的属性。请看下文。

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      show: true,
      stuff: "<span><strong>hello</strong> <span>world</span></span>"
    };
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-content>
      <v-layout>
        <v-dialog v-model="show" scrollable max-width="950px">
          <v-card>
            <div v-html="stuff"></div>
          </v-card>
        </v-dialog>
      </v-layout>
    </v-content>
  </v-app>
</div>

【讨论】：

这行得通。谢谢。我试图将 v-html 包裹在 {{editedItem.Publication }} 周围，以您的方式进行设置。再次感谢
这种情况怎么样？ stackoverflow.com/questions/57317384/…我相信它可以使用你的洞察力