[Vuejs]-How to bind a dynamic html content in Vue vmodal

0👍

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",
      });
    },
  }

Leave a comment