vue.js - 如何在Vue vmodal中绑定动态html内容
问题描述
我需要将 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”是我需要绑定的动态内容。
解决方案
解决方案 :
<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",
});
},
}
推荐阅读
- java - 如何在由另一个类构建的类中搜索单词?
- c# - Windows 10 中的 SHChangeNotify 未更新快速访问项目
- javascript - 如何使用 JavaScript 浏览 DropDownList 中的随机项目?
- r - 空白不想被清理
- javascript - 如何从角度组件使用我的节点端点插入数据?
- google-apps-script - onSubmit 触发器在没有提交表单的情况下执行
- r - 我在一列中有几个变量,并想在 R 中创建一个循环,以便我可以将每个变量导出到同一个 Excel 工作簿中它自己的工作表中
- javascript - 我正在尝试将所有相同的值放在我的输入字段中
- python - 如果存在键或默认值,则过滤数组并返回值
- jasper-reports - JRXML:动态排序字段