Vue.js 如何在Vue vmodal中绑定动态html内容

我需要将HTML数据绑定到VueJS弹出窗口。我使用引导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>

从“BootstrapVue”导入{BootstrapVue}；
导入“bootstrap/dist/css/bootstrap.css”；
导入“bootstrap vue/dist/bootstrap vue.css”；
Vue.use（BootstrapVue）；
方法：{
AnnouncementEventClick（id，类别）{
var full_description=null；
如果（类别=“公告”）{
this.AnnouncementList.forEach（函数（公告）{
如果（announcement.id==id）{
完整描述=announcement.announcementEvents.full描述；
}
});
} 
this.desc=完整描述；
此.bvModal.show（“模式可滚动”）；
},
}
{{desc}}
好啊

代码中的“完整描述”是我需要绑定的动态内容。

解决方案：

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

{{desc}}
方法：{
AnnouncementEventClick（id，类别）{
var full_description=null；
如果（类别=“公告”）{
this.AnnouncementList.forEach（函数（公告）{
如果（announcement.id==id）{
完整描述=announcement.announcementEvents.full描述；
}
});
}
});
}
this.desc=完整描述；
//此.bvModal.show（“模式可滚动”）；
this.showMsgOk（）；
},
showMsgOk（）{
常量h=此。$createElement；
//使用HTML字符串
const description=h（“div”{
类：[“模式可滚动”]，
domProps:{innerHTML:this.desc}，
});
//我们必须将生成的VNode作为数组传递
此.bvModal.msgBoxOk（[说明]{
按钮化：“md”，
对,，
尺寸：“lg”，
});
},
}

您只需将

v-html=“desc”

作为属性添加到要注入的一个元素中即可html@ThibautMaurice，v-html在vue组件中不起作用。