change captcha

[Omid444422]

how can i change captcha code by click or event ?? for example people click component and refresh code

[parsajiravand]

Hello my friend thanks for your communicate. You have two ways First and old way you can set key component like this: https://github.com/parsajiravand/vue-client-recaptcha/issues/18

<script lang="ts" setup>
import VueClientRecaptcha from "vue-client-recaptcha";

import { ref } from "vue";
/* pass value to captcha  */
const inputValue = ref(null);
const randomKey = ref(0);

const reset = () => {
  /* reset captcha */
  // random key between 1 to 1000
  randomKey.value = Math.floor(Math.random() * 1000) + 1;
  inputValue.value = null;
};

const getCaptchaCode = (value) => {
  /* you can access captcha code */
  console.log(value);
};
const checkValidCaptcha = (value) => {
  /* expected return boolean if your value and captcha code are same return True otherwise return False */
  console.log(value);
};
</script>
<template>
  <div>
    <button @click="reset">Reset</button>
    <VueClientRecaptcha
      :key="randomKey"
      :value="inputValue"
      @getCode="getCaptchaCode"
      @isValid="checkValidCaptcha"
    />
  </div>
</template>

<style>
@import url("/node_modules/vue-client-recaptcha/dist/style.css");
</style>

Second solution is new (after your report). You can use ref and hide refresh icon if you want like this: If you want use this code needed to be update to version 1.1.5

<script lang="ts" setup>
import VueClientRecaptcha from "vue-client-recaptcha";

import { ref } from "vue";
/* pass value to captcha  */
const inputValue = ref(null);

const getCaptchaCode = (value) => {
  /* you can access captcha code */
  console.log(value);
};
const checkValidCaptcha = (value) => {
  /* expected return boolean if your value and captcha code are same return True otherwise return False */
  console.log(value);
};
const captchaRef = ref(null);

</script>
<template>
  <div>
    <!-- Button for resest captcha -->
    <button @click="captchaRef.resetCaptcha()">Reset Captcha</button>

    <!-- VueClientRecaptcha component -->
    <VueClientRecaptcha
      ref="captchaRef"
      :value="inputValue"
      :hideRefreshIcon="true"
      @getCode="getCaptchaCode"
      @isValid="checkValidCaptcha"
    />
  </div>
</template>

[Omid444422]

thank you