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

我正在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上。我还注意到，在节目中，元素模态被移动到了body的最底部，就在end body标记之前。在第一次加载时，它将位于组件中声明的位置。（这可能是为什么它没有被看到，因此没有被删除的原因吗？）当我移动到不同的组件，然后返回以模态作为子组件打开组件并再次触发显示时，会出现问题。DOM上的模态元素会堆积起来，不会被删除

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

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

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

观察：{
showModal（show）{
如果（显示）{
modal（“#字段形式modal”）.show（）；
}
}
},

但是，当我到达这一行时：UIkit.modal（“#form field modal”）.show（）。元素尚不在DOM上。因此，我得到了这个错误：无法读取未定义的属性“show”。如果我的假设是正确的，我想它只会在showModal watch功能之后添加

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

---

有没有关于如何解决这个问题的建议？谢谢大家!

在调用show函数之前，我继续解决这个问题，并使用

$nextTick

确保modal元素已经在DOM中

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

---

在调用show函数之前，我继续解决这个问题，并使用

$nextTick

确保modal元素已经在DOM中

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

---

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

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


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


    

//父组件
//模态分量
//内容

父组件id应设置为modal中的容器

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


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


    

//父组件
//模态分量
//内容

我现在也遇到了这个问题。你对这个问题有什么更新吗？？？@AbingPj刚刚发布了一个新的答案，我现在也遇到了这个问题。你对这个问题有什么更新吗？？？@AbingPj刚刚发布了一个新的答案