当父组件被销毁时，UIkit 模态元素不会从 DOM 中删除（Vue.js）

Question

我在我的 Vue 应用程序上使用 UIKit 模态。

UIkit.modal(element).show(); // adds class uk-open and style="display:block"
UIkit.modal(element).hide(); 

Hide 只是删除类uk-open和style="display:block" 。 我注意到即使在 modal 的父组件被销毁后，modal 元素仍保留在 DOM 上。 我还注意到，在show 中，元素模态被移动到 body 的最底部，就在结束 body 标签之前。 第一次加载时，它将位于组件中声明的位置。 （这可能是它没有被看到并因此没有被删除的原因吗？）当我移动到不同的组件并返回以模态作为子组件打开组件并再次触发显示时会出现问题。 DOM 上的模态元素堆积起来并且不会被移除。

我尝试过的一种解决方法是，我添加了一个条件，而不是触发显示的按钮，如果返回 true，则该元素将添加到 DOM 并触发显示。

    <field-form-modal
        v-if="showModal"
        .....
    />

    watch: {
    showModal(show) {
        if (show) {
            UIkit.modal('#field-form-modal').show();
        }
    }
},

然而，当我到达这一行时： UIkit.modal('#form-field-modal').show(); . 该元素尚未在 DOM 上。 因此，我收到此错误：无法读取 undefined 的属性“show” 。 如果我的假设是正确的，我认为它只会在 showModal watch 功能之后添加。

对于如何解决这个问题，有任何的建议吗？ 谢谢！

Answer 1

父组件 id 应在模态中设置为容器

// Parent component
<div id="parent-component">
    
  <sample-modal/>
</div>


// Modal component
<div
    id="sample-modal"
    class="uk-modal"
    container="#parent-component"
>
     // contents
</div>


    

Answer 2

我继续解决方法并使用$nextTick来确保在调用 show 函数之前模态元素已经在 DOM 中。

watch: {
    showModal: {
        handler: function(show) {
            this.$nextTick(() => {
                if (show) {
                    UIkit.modal('#field-form-modal').show();
                }
            });
        },
        deep: true
    }
}