'Sharing reCaptcha token between alpine and livewire
I am trying to build a reCapture component for a Laravel application using Livewire and Alpine and I can't figure out how to pass the recaptcha token value into the livewire component to complete the validation.
If I understand correctly this is because when I submit the form I am setting a hidden input value (recaptchaToken), however, livewire can not access hidden inputs so I need to use wire:model to bind to the data.
How can I pass the recaptchaToken.value in the submitForm() method, or how do I set the $recaptchaToken value with wire:model
<form x-data="{
execute(){
grecaptcha.ready(() => {
grecaptcha.execute('{{ env('RECAPTCHA_SITE_KEY') }}', { action: 'contact' })
.then((token) => {
{{-- how can i bind to wire:model instead of setting input.value ??? --}}
this.$refs.recaptchaToken.value = token;
})
})
}
}"
x-on:submit.prevent="execute" class="flex-col gg"
{{-- how can I access the recaptchaToken.value to pass into the submitForm() method ??? --}}
wire:submit.prevent="submitForm()">
<input wire:model="recaptchaToken" type="hidden" name="recaptchaToken" x-ref="recaptchaToken">
<button type="submit" class="w-fc btn primary">SUBMIT</button>
</form>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
