Bootstrap Popover 内容不响应 Vue2

Question

我正在尝试在 Vue 中使用 Bootstrap4 为弹出框创建一个组件：

<template>
    <div>
        <div :id="uid + '_Content'" class="d-none">
            <slot name="content">

            </slot>
        </div>
        <div :class="'call' + uid">
            <slot name="caller">

            </slot>
        </div>
    </div>
</template>

<script>
module.exports = {
    data() {
        return {
            uid: this.genUID()
        }
    }, 
    props: {
        title: {
            type: String,
            required: false,
            default: ''
        }
    },
    mounted() {
        _this = this;
        // PopOver Definition
        const popover = new bootstrap.Popover(document.querySelector('.call' + this.uid), {
            container: 'body',
            title: this.title,
            html: true,
            placement: 'auto',
            sanitize: false,
            customClass: 'noselect',
            content: () => {
                return document.querySelector("#" + _this.uid + "_Content").innerHTML;
            }
        });
    },
    methods: {
        genUID() {
            return "Popover_" + Math.random().toString(16).slice(2);
        }
    }
}
</script>

但是，当从另一个组件向<slot name="content"> 传递内容时，数据不是反应性的。我是否缺少任何配置信息以使其具有反应性？使用 Vue 和（常规）Bootstrap（notBootstrap-Vue）是否可以做到这一点。

Answer 1

您正在失去反应性，因为 bootstrap.Popover 的 content 选项正在返回元素的 HTML 字符串，而不是元素本身。弹出框只是复制打开时存在的 HTML。如果您传递元素，Bootstrap 会将元素本身重新设置为弹出框，因此应该反映对元素子项的更改。 （请注意，这仍然可能会被重写元素本身的虚拟 DOM 更改所破坏，这就是为什么 Bootstrap-Vue 在这里仍然会更好。）如果可以重用弹出框，您需要将元素重新设置为您的每次弹出窗口关闭时组件自己的树。您还需要将 _Content 元素设置为仅在未重新设置父级时隐藏。

这就是它的样子：

<template>
    <div ref="container" class="Popover__Container">
        <div ref="content" class="Popover__Content">
            <slot name="content">

            </slot>
        </div>
        <div ref="caller" class="Popover__Caller">
            <slot name="caller">

            </slot>
        </div>
    </div>
</template>

<script>
module.exports = {
    props: {
        title: {
            type: String,
            required: false,
            default: ''
        }
    },
    mounted() {
        const content = this.$refs.content;
        // PopOver Definition
        const popover = new bootstrap.Popover(this.$refs.caller, {
            container: 'body',
            title: this.title,
            html: true,
            placement: 'auto',
            sanitize: false,
            customClass: 'noselect',
            content: content
        });
        $(this.$refs.caller).on('hidden.bs.popover', () =>
        {
          this.$refs.container.prepend(content);
        });
    }
}
</script>

<style scoped>
.Popover__Container > .Popover__Content {
    display: none;
}
</style>

（我还用 refs 替换了 UID 方法，因为那是一种更像 Vue 的方法。）