Web前端(14)-vue3 中el-dialog弹窗不弹出的问题问题 vue2中都是用的:visible.sync="

问题

vue2中都是用的:visible.sync="dialogVisible"来控制是否隐藏和展示弹窗，但是在vue3中会提示你visible.sync已经废弃，让你改成v-model:visible,但是改了之后，发现还是不能弹出弹窗。

解决

将v-model:visible改成v-model即可。

如下所示：

v-model="dialogVisible"

完整代码如下：

<el-button @click="handleLogout">退出登录</el-button>
<el-dialog modal-append-to-body v-model="dialogVisible" :append-to-body="true" title="确认退出">
      <template #content>
           <p>你确定要退出登录吗？</p>
      </template>
      <template #footer>
           <span class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="confirmLogout">确定</el-button>
          </span>
      </template>
</el-dialog>