【发布时间】:2020-11-25 07:12:20
【问题描述】:
我需要将 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'是我需要绑定的动态内容。
【问题讨论】:
-
您可以将
v-html="desc"
作为属性添加到您的元素之一以注入html -
@ThibautMaurice ,v-html 在 vue 组件中不起作用。
标签: vue.js popup customization v-model