How to bind a dynamic html content in Vue vmodal

I need to bind HTML data to VueJS popup. I am using bootstrap vue for showing custom popup. I have to bind some dynamic HTML data to the popup. Currently, it was binding as a string type which shows the HTML tags too as the content.

import { BootstrapVue } from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
Vue.use(BootstrapVue);

  methods: {
      AnnouncementEventClick(id, category) {
      var full_description = null;
      if (category == "announcement") {
        this.AnnouncementList.forEach(function (announcement) {
          if (announcement.id == id) {
            full_description = announcement.announcementEvents.full_description;
          }
        });
      } 
      this.desc = full_description;
      this.$bvModal.show("modal-scrollable");
    },
  }


<template>
    <div>
      <b-modal id="modal-scrollable" scrollable hide-footer hide-header>
        {{ desc }}
        <b-button class="mt-3" block @click="$bvModal.hide('modal-scrollable')"
          >OK</b-button
        >
      </b-modal>
    </div>
</template>

In the code 'full_description' is the dynamic content that I need to bind.

1 answer

  • answered 2020-11-25 13:23 Athulya Ratheesh

    Solution :

        <div>
         {{ desc }}
        </div>
    
     methods: {
        AnnouncementEventClick(id, category) {
          var full_description = null;
          if (category == "announcement") {
            this.AnnouncementList.forEach(function (announcement) {
              if (announcement.id == id) {
                full_description = announcement.announcementEvents.full_description;
              }
            });
          }
            });
          }
    
          this.desc = full_description;
          //this.$bvModal.show("modal-scrollable");
          this.showMsgOk();
        },
        showMsgOk() {
          const h = this.$createElement;
          // Using HTML string
          const description = h("div", {
            class: ["modal-scrollable"],
            domProps: { innerHTML: this.desc },
          });
    
          // We must pass the generated VNodes as arrays
          this.$bvModal.msgBoxOk([description], {
            buttonSize: "md",
            centered: true,
            size: "lg",
          });
        },
      }