I've been working with Vue JS and Laravel to create a modal. The first time I press the button with @click, it works fine but the next time I encounter an error.
Here's my Laravel Blade code:
<div class="col-span-12 mb-5" id="app">
<div class="text-end text-base">
<button type="button" class="text-primary hover:text-secondary" @click="showModal = true">Verify your email
</button>
</div>
<v-modal :open="showModal">
<form action="" method="post" id="form_verify_email">
@csrf
<input type="hidden" name="email" value="{{ auth()->user()->email }}">
<div class="">
<x-user.form.buttons.primary>
{{ __('Verify Email') }}
</x-user.form.buttons.primary>
</div>
</form>
</v-modal>
<x-user.form.inputs name="email" placeholder="Email" type="email" :value="old('email', auth()->user()->email)"/>
</div>
My JS code is as follows:
import { createApp } from 'vue'
import modal from './components/modal.vue'
// Vue app
const app = createApp({
data() {
return {
showModal: false,
}
},
})
app.component('v-modal', modal)
app.mount('#app')
For Vue:
<script setup>
import { ref, defineProps, onMounted } from 'vue'
import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
let { open } = defineProps({
open: {
type: Boolean,
required: true,
},
})
</script>
I have also used a template from Tailwind CSS, you can find it here.
Could you please help me identify where I may be making a mistake?