element-plus el-tab组件绑定的v-model值不及时更新的问题

使用element-plus官方demo进行测试,当点击第二个tab的时候,console出的avtiveName值是第一个tab的name,如图
image.png
目前需求是想要在点击一个tab的时候把名字通过动态路由的方式添加在路由后面,如果拿到的是前一个tab的名称拼到路由后肯定是有问题的。
如何做到点击一个tab就获取对应的name呢?

需要补充的是我的el-tab-pane写了如图中的插槽
3e08774824bd8a63a02e53a06c122a7.png
tab-change事件一直无法触发

直接将tab-click的事件中获取的tabpaneName赋值给activeName确实可以实现,但是仍然无法解决路由名称与对应tab名称不一致的问题。会出现点击一个tab,路由拼接的是上一个tab的name

阅读 8.2k
2 个回答

1.png.png

可以看出,执行click后并不会立刻更改paneName的值,而是会等异步的beforeLeave执行完成,才会去更改,因为before-leave可能会阻止tab的切换

image.png

所以如果想在click中获取paneName的值可以使用tab.paneName,但是按照你的逻辑应该切换成功再去更改路由,那么应该监听tab-change事件
image.png


看了下更新日志,tab-change事件在2.18版本才加入
image.png

这样的话可以:1、升级element-plus版本(推荐),2、使用watch监听activeName,3、使用tab-click

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ,欢迎正在阅读的你也加入。

tab.paneName

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题