Как связать динамический HTML-контент в Vue vmodal

Мне нужно привязать данные HTML к всплывающему окну VueJS. Я использую bootstrap vue для отображения пользовательского всплывающего окна. Мне нужно привязать некоторые динамические данные HTML к всплывающему окну. В настоящее время он имеет привязку как строковый тип, который также отображает HTML-теги в качестве содержимого.

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>

В коде full_description — это динамический контент, который мне нужно связать.


vue.js customization popup v-model
person Athulya Ratheesh    schedule 25.11.2020    source источник
comment
Вы можете просто добавить v-html="desc" в качестве атрибута к одному из ваших элементов для вставки html.   -  person Thibaut Maurice    schedule 25.11.2020
comment
@ThibautMaurice, v-html не работал в компоненте vue.   -  person Athulya Ratheesh    schedule 25.11.2020

Ответы (1)


arrow_upward
0
arrow_downward

Решение :

    <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",
      });
    },
  }
person Athulya Ratheesh    schedule 25.11.2020