vue项目中图片验证码的问题

Question

项目中有个选项卡，卡头两个，卡体中都有图片验证码的组件，原先逻辑是mounted时，都获取验证码，问题来了但后台只记录一个验证码，这样后一个验证码会覆盖前一个，导致我提交验证时，提示验证码错误
现在我的逻辑是：mounted的时候，获取第一个卡体的验证码，每当点击另一个卡头时（如激活卡头为第一个，我点第二个时发请求），发请求获取对应卡体中新的验证码

请教大神们，我该如何实现，在线等

Answer 1

每个选项卡里面都要有一个内容块，内容块里面包含着这个验证码获取，输入，提交这些。当你切换选项卡的时候，通过v-if切换内容块，这样每次切换都会执行mounted，向后台获取一个验证码，这样保证他每次提交验证的都是最新的

Answer 2

如果使用了vuex建议这两个模块公用一个验证码。
如果没有使用，也可以在同父组件中保存下验证码，在切换后公用一个。

那为什么每次请求之后服务器只记录第一次的？

Answer 3

如果卡头有 click 事件，可以在 click 事件中触发重新获取验证码

Answer 4

卡头是一个组件，下面是一个组件。点击卡头，获取卡头的相关属性。发送请求 获取验证码