Vuetify v 对话框中的 HTML [英] HTML in a Vuetify v-dialog

问题描述

我正在尝试将格式化的 HTML 添加到 v 对话框的内部.我里面有一张 v 卡，但我已经把它撕掉了，所以我可以从头开始.这是我目前所拥有的

 <div>{{editedItem.Publication}}</div></v-对话框>

{{editedItem.Publication}} 包含带有颜色变化和超链接的格式化 HTML.我已经看到在哪里使用 v-card v-text with v-html 应该可以工作，但对我来说却没有.

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

解决方案

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

new Vue({el: '#app',vuetify: 新的 Vuetify(),数据() {返回 {显示:真实，东西:<span><strong>你好</strong><span>世界</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="应用程序"><v-app><v-内容><v-布局><v-dialog v-model="show" scrollable max-width="950px"><v-card><div v-html="stuff"></div></v-card></v-对话框></v-layout></v-content></v-app>

I am trying to add formatted HTML to the inside of a v-dialog. I had a v-card inside but I have ripped that out so I can start from scratch. This is what I have so far

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

The {{editedItem.Publication}} contains formatted HTML with color changes and also hyperlinks. I've seen where using the v-card the v-text with v-html is suppose to work but it didn't for me.

I have a data-table where when I double click on a row the dialog pops up with the formatted HTML but I'm getting straight text. If I need to put the v-card back that is fine as long as I can render HTML. Thanks.

解决方案

Please double check how you are using v-html. You need to use it on the element that will contain HTML and you need to add it as an attribute that binds to a data property containing an HTML string. Please see below.

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>

这篇关于Vuetify v 对话框中的 HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！