ant design vue之 modal组件动态设置title

今天遇到的问题,差点被自己蠢哭了。

问题背景:想要的效果本来是像下面这样。点击新增角色,title是 '新增角色名称'。点击编辑角色名,title是'编辑角色名称'。ant design vue之 modal组件动态设置title_第1张图片

ant design vue之 modal组件动态设置title_第2张图片 一开始我陷入了一个误区,下面是部分关键代码


这样写,乍看一下,没啥毛病啊,通过传入的变量(isEdit)来判断点击的哪个按钮。但是设置的title不管点击的是哪个按钮都是显示 '编辑角色名称',就很难受,刚开始我把原因归于这个Modal弹窗不支持动态修改title(虽然内心还是很抗拒,觉得不可能不支持啊),但是一个偶然的机会,我发现把两个click的事件名换成不同的就可以实现想要的效果了。代码如下:


我慌了,看来过通过点击事件来设置这个title完全是没有问题的,那就是前面的代码哪里有问题,没办法,回过头重新定位下原因出在哪了。打debugger,发现代码根本走不到 else 的逻辑里面,这个时候我才恍然大悟,打console.log,终于发现了问题原因,那就是vue中的click事件默认自带的有一个event 原生 dom 参数,如果自己不传变量,那默认第一个变量的值就是 event对象,if 判断是通过真值判断的,对象肯定是个真值,所以这就是我最开始那样写的问题所在了。


这样写就没有问题了,遇到这个问题主要还是自己大意了,警示警示。

你可能感兴趣的:(ant-design-vue,埋坑之路,vue,ant,design,vue,Modal,title)