HTML in a Vuetify v-dialog

Question

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.

Answer 1

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>