I recently encountered a problem using El-Dialog in a project where the El-Dialog open event did not work.

The code is as follows:

<el-dialog
  ref="dialog"
  :close-on-click-modal="false"
  class="edit-dialog"
  :class="mtUpdataname === 'CONTRACT' ? 'hetong' : ''"
  v-if="visible"
  :visible.sync="visible"
  @open="open"
  width="80%"
  height="80%"
  :before-close="handleClose"
>
  <div slot="title" class="header-title">
    <span class="title-name">{{ data ? Data. title: 'prompt'}}</span>
    <span class="title-tips">{{ data ? data.tips : '' }}</span>
  </div>
</el-dialog>
Copy the code

The breakpoint of the open event did not go in when the dialog was opened.

Error: There is an extra V-if in the el-Dialog tag, which can be broken by removing the V-if.

Emit an open event when Visible is true. If the component rerenders after adding a V-if tag, visible will not work, and v-if will work.