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

Question

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

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

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

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

<field-form-modal
v-if="showModal"
.....
/>
watch: {
showModal(show) {
if (show) {
UIkit.modal('#field-form-modal').show();
}
}
},

然而，当我到达这一行时：UIkit.modal('#form-field-modal'(.show((。元素尚未在DOM上。因此，我得到了这个错误：无法读取未定义的属性"show"。如果我的假设是正确的，我认为它只会在showModal手表功能之后添加。

关于如何解决这个问题，有什么建议吗？非常感谢。

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

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

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