【验证码】实现验证码输入错误时重新生成验证码

实现前代码

现在的代码仅渲染 重新生成验证码就必须刷新网页 同时刷新后表单内容会清空 

 <template>
   <div class="grid-content bg-purple-dark">
      <span class="grid-content-span">
         <img :src="RandomVerificationCode" alt="" />
      </span>
   </div>
</template>

 computed: {
    RandomVerificationCode () {
      return `/api_proxy/recycle/captcha?r=${Math.random()}`
    }
  },

 

实现后的代码
 

实现逻辑：就是给验证码地址添加 &key 然后他的值是 当前时间戳 执行状态是 当服务器返回验证错误时就生成当前时间戳 最终实现验证码错误 重新生成新验证码

 <template>
   <div class="grid-content bg-purple-dark">
      <span class="grid-content-span">
         <img :src="RandomVerificationCode" alt="" />
      </span>
   </div>
</template>

 data () {
    return {
      captchaError: false
    }
  }

 computed: {
    RandomVerificationCode () {
      return `/api_proxy/recycle/captcha?r=${Math.random()}&key=${this.captchaError ? Date.now() : ''}`
    }
  },


.then({data:res}) => {
  if (res.message === '验证码错误') return (this.captchaError = true)
}