The el-dialog pop-up box calls the component. Only the first pop-up calls the component interface, and subsequent pop-ups do not call the interface. The problem is solved.

Problem Description

Recently, I encountered a problem during project development. When clicking the button from the list to pop up the el-dialog pop-up box, the edit page component was called. I closed the pop-up window and then clicked the button to make the el-dialog pop-up box appear. I found that it could only be triggered once in the editing component. The method in the mounted hook, if you click the pop-up box again to appear, it will no longer be in the mounted hook.

Because the el-dialog pop-up box uses display: none and display: block to control the display and hiding, the dom element will not be deleted, so the content in the dialog pop-up box will only create a dom element to render the page during initialization, if there are components in it And the component will call the method during initialization, then this method will only be called when the pop-up box is opened for the first time!

There is usually a requirement: the component is nested in a dialog pop-up box, and it is hoped that every time the pop-up box is opened in the parent component, the method in mounted in the child component will be re-executed!

---

solution:

Adding el-dialog_v-if

 <el-dialog 
 	title="密钥管理" 
 	:visible.sync="isAKSKManagementDialogVisiable" 
 	width="1200px" 
 	:close-on-click-modal="false" 
 	v-if="isAKSKManagementDialogVisiable">

problem solved.

References:

The el-dialog pop-up box calls the component. Only the first time the calling component interface pops up, and the interface that is not in the calling component pops up later. The
component introduced in the el-dialog pop-up box will only trigger the method in the component once, and it will not work if it is opened again. ,solved.