Antd弹框二次点击无法初始化问题的解决

最新推荐文章于 2024-10-01 18:51:18 发布

「已注销」

最新推荐文章于 2024-10-01 18:51:18 发布

阅读量105

点赞数

文章标签： java 前端服务器 linux javascript

本文链接：https://blog.csdn.net/m0_61726796/article/details/133001239

版权

在使用Ant Design的弹框(A-modal)时遇到问题，当用户二次点击打开弹框，参数传递和组件初始化未能正确执行。通过在弹框组件上添加`v-if`指令，确保每次弹框打开时都会重新调用`setup`和`mounted`生命周期钩子，从而解决了这个问题。此解决方案适用于Vue.js应用中处理类似组件状态管理的场景。

摘要由CSDN通过智能技术生成

使用Antd弹框时，出现了二次点击显示弹框，但无法正确传参和进行组件初始化的问题。

我们需要在这段代码中

<a-modal
  v-model:visible="showTemplateDetail"
  :footer="null"
  title="模板详情"
  :width="800"
>
  <template-detail :templateId="item.id"></template-detail>
</a-modal>

加上v-if，变成

<a-modal
  v-model:visible="showTemplateDetail"
  v-if="showTemplateDetail"
  :footer="null"
  title="模板详情"
  :width="800"
>
  <template-detail :templateId="item.id"></template-detail>
</a-modal>

即可。这样进入组件后会再次调用setup和mounted。