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

Question

使用element-plus官方demo进行测试，当点击第二个tab的时候，console出的avtiveName值是第一个tab的name，如图

目前需求是想要在点击一个tab的时候把名字通过动态路由的方式添加在路由后面，如果拿到的是前一个tab的名称拼到路由后肯定是有问题的。
如何做到点击一个tab就获取对应的name呢？

需要补充的是我的el-tab-pane写了如图中的插槽

tab-change事件一直无法触发

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

Answer 1

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

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

---

看了下更新日志，tab-change事件在2.18版本才加入

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

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

Answer 2

tab.paneName