Issue with Vue JS Components: Button function not working on second click with @click

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?

Answer №1

Upon closing the dialog box, the showModal parameter remains true, resulting in no change when clicked again. To resolve this, ensure to set it to false upon closing the v-modal event:

The code for your v-modal is as follows:

<Dialog :open="open" @close="$emit('close')">

Reference:

Additionally, within your parent component, include the following 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" @close="showModal = false">
        <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>

Answer №2

Give this a shot:

@click="toggleModal = !toggleModal"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing VueJs (Quasar) to access vuex store within the router

Recently, I have been diving into learning Vuex and creating an authentication module. Following a tutorial, I reached a point where I needed to use the store in the router. However, after importing my store at the top of the router index.js file, I notice ...

Is there a way to transform an angular 2 app.module into ES6 format?

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; //specific imports remov ...

The Angular 2 service is not transmitting the POST data in the correct format, although it functions properly when transmitted through PostMan

When the POST data is transmitted from the Angular 2 service in this manner: const data = new FormData(); data.append('date', '12/01'); data.append('weight', '170'); return this.http.post(this.u ...

Vue 3 Option api: Issue with v-model input not propagating from child component to parent element

I am currently working on a new project using Nuxt 3, and I have encountered an issue with a contact form where the input values from a child component are not being received by the parent element. Let's dive into the code breakdown: Parent Component ...

Experiencing difficulties with executing numerous NodeJs queries

Could someone assist with rendering multiple queries in a Nodejs view? The console shows Promise {pending} and I can't figure out what's causing the issue. I'd appreciate any help or guidance on how to fix this problem. router.get('/ ...

Discovering objects on a JavaScript webpage using Selenium

Looking to automate some searches for myself, but running into an issue. Here is the website in question: Struggling to locate the search bar using the program, and unsure why. driver = webdriver.Firefox() driver.get('https://shop.orgatop.de/') ...

“Unable to update value using Controller component in react-hook-form”

Currently, I am utilizing the react-hook-form in combination with MUI components. In order to incorporate the Select component, I have enclosed it within the Controller since direct registration is not possible. Although everything seems to be functioning ...

Having difficulty with the javascript click() function in an html document

Thank you in advance for checking this out. In my web application, users can choose options from four separate drop-down menus. Once a selection is made, the software triggers a click() function that generates a new span element within a div: var activeF ...

Looking for a JavaScript function that can utilize AJAX to execute PHP code and display the PHP output on the webpage

I've been trying to use JavaScript to execute some PHP code and then display the results on the page. I came across a piece of code that achieves this using ajax and by placing the PHP code in an external file. However, the code I found seems to show ...

Change the rectangle's position by rotating another rectangle

I am facing a challenge with two rectangles that have pivots attached to them, The task at hand is to align the green rectangle's position based on the rotation of the red rectangle. The desired outcome should resemble the image provided: Despite t ...

Issue with Angular ngModel not syncing with variable changes

Currently using Angular 4 and Typescript, I have a table containing <select> elements in my template: <tr *ngFor="let task of tasksDetails"> <td>{{task.name}}</td> <td> <select class="form-control" [(ngMode ...

Exploring the process of integrating absolute paths within a global SCSS file in a VueJS project

The webpack configuration in my vue.config.js file looks like this: const path = require("path"); module.exports = { pluginOptions: { 'style-resources-loader': { preProcessor: 'scss', patterns: [ "./src/style ...

Adding colors dynamically upon page reload with javascript and jQuery

I have created an array of colors and am attempting to use colors.forEach inside the ready function to call addBox for each color in the array. My goal is to ensure that all the colors are added when the page is reloaded. Please let me know if you require ...

Verify whether the keys of Object1 exist in Object2; if they do, compare their corresponding values

How can I accomplish the following task? I want to check if the keys of object1 are present in object2. If a key is found, I need to compare its value with that of object2. If the values are different, I should replace the value in object2 with the one fro ...

exchange the class using only JavaScript

I need help with a code snippet that allows for swapping classes using a loop. The objective is to click on the brown square causing it to move to the position of the blue square, while the blue square moves to the previous position of the brown square. T ...

Reorganizing array sequence within a sortable list

I'm currently working with the react-beautiful-dnd module to build a draggable list. The backend data I receive is arranged according to the sequence field. Once an item is dragged and dropped, I utilize the reorder function to generate a new list. Ho ...

When browserify is utilized, the error "function is not defined" may show up as an Un

Exploring an example at and attempting a function call as shown below: My HTML code is: <!DOCTYPE html> <html> <head> <title>Testing Browserify</title> <script src="bundle.js"></script> </head> <body& ...

Generate an array containing the IDs of the chosen objects

Suppose I have an array like this: var aaa = [ {"id": 1, "text": "Ann"}, {"id": 2, "text": "Bob"}, {"id": 3, "text": "Carol"}, {"id": 4, "text& ...

Vue's smooth scrolling in Nuxt.js was not defined due to an error with the Window

There seems to be an issue with adding vue smooth scroll to my nuxt.js project as I'm encountering the "window is not defined error". The steps I followed were: yarn add vue2-smooth-scroll Within the vue file, I included: import Vue from 'vue ...

Is it possible to view the object sent from AJAX to PHP in PHP using a debugger?

I'm facing an issue where I am making an AJAX call to a PHP file, sending a JSON object as a parameter from JavaScript. The PHP file is supposed to perform some logic with the object and return it using json_encode('whatever');. However, the ...