Failure to trigger an event in Vue.js

I've implemented an overlay feature for my modal that should toggle the modal when clicked. Here's the code snippet I have in my mounted() method:


const overlay = document.querySelector(".modal-overlay");

overlay.addEventListener("click", this.toggleModal);

var closemodal = document.querySelectorAll(".modal-close");
for (var i = 0; i < closemodal.length; i++) {
    closemodal[i].addEventListener("click", this.toggleModal);
}

Below is the template I added:

<template> <divclass="modal pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
<div ref="overlay" class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50 z-50"></div>

<div
class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto"
>
<div
class="modal-close absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-white text-sm z-50"
>
<svg
class="fill-current text-white"
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 18 18"
>
<path
d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"
/>
</svg>
<span class="text-sm">(Esc)</span>
</div>

<!-- Add margin if you want to see some of the overlay behind the modal-->
<div class="modal-content py-4 text-left px-6">
<!--Title-->
<div class="flex justify-between items-center pb-3">
<p class="text-2xl font-bold">Bedankt</p>
<div class="modal-close cursor-pointer z-50">
<svg
class="fill-current text-black"
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 18 18"
>
<path
d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"
/>
</svg>
</div>
</div>

<!--Body-->
<p>Je email adres is toegevoegd aan onze mailing list. We houden je op de hoogte van de laatste ontwikkelingen</p>
<p>Tevens hebben we je op de beta lijst gezet en je zult als een van de eersten een uitnodiging van ons ontvangen om het platform te testen</p>
<!--Footer-->
<div class="flex justify-end pt-2">
<button
@click="toggleModal"
class="modal-close px-4 bg-indigo-500 p-3 rounded-lg text-white hover-bg-indigo-400"
>Close</button>
</div>
</div>
</div>
</code></pre>

<p>
</p>

<p>I've confirmed with a <code>console.log() that the click events are being added. However, clicking on the modal does not trigger the expected response. I attempted another console.log(), but it did not yield any results.



Any insights or suggestions?
javascriptvue.jsvuejs2

Answer №1

Vue allows you to attach click listeners to various elements, providing a touch of magic to your interactions. Whether it's a div, span, or even an image, simply include @click in your overlay div to make it responsive.

<div ref="overlay" @click="toggleModal"></div>

Answer №2

It seems like the issue may be related to the CSS class pointer-events-none. While I can't say for certain what it does, if it indeed sets pointer-events: none, it could potentially disable click events for all child elements.

Addressing this should help resolve your problem. Additionally, here are a few other considerations:

  1. When working with Vue, it's recommended to utilize ref/$refs instead of CSS selectors within the mounted hook when targeting elements.
  2. Consider whether the mounted hook is actually necessary, as you can directly add @click attributes in the template.
  3. Double-check that you haven't inadvertently attached the same click listener to an element multiple times. If toggleModal is being called twice, it could result in no visible change. It appears from the provided code that some elements may have duplicates of the click listeners pointing to 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

Auto language-switch on page load

Wondering if using jQuery is the best approach to create a single French page on my predominantly English website. I want it to work across multiple browsers on pageload, currently using HTML replace. jQuery(function($) { $("body").children().each(funct ...

javascriptjqueryhtmlcss

Tips for preventing NextJS from including a dynamically imported component in the main _app.js bundle while utilizing Module Aliases

Currently, I am in the process of transforming some shared-ui components into dynamically imported ones within NextJS 11. I have set up module aliases using @nx/next:library, for example @my-site/shared-ui, all exported from an index.ts file as shown belo ...

javascriptreactjsnext.jsimport

Error: The window object is not found in this context when initializing the Commerce module from the commerce.export.js file located in the node_modules folder within the @chec

I have been working with the pages router and custom app file (_app.js) https://nextjs.org/docs/pages/building-your-application/routing/custom-app It seems that the issue may be within my _app.js file, where I have the following code: import '../glo ...

javascriptreactjswebpacknext.jscommerce

Timeout error occurred in Async.js because the callback was already triggered

Whenever I execute index.js, I encounter an ETIMEDOUT or ECONNRESET error followed by a Callback was already called error. Initially, my assumption was that the issue stemmed from not including a return before calling the onEachLimitItem callback. Consequ ...

javascriptnode.jscallbackpromiseasync.js

When I make a request to the API, I end up being redirected back to the Home page with a

I am currently working with the following controller: namespace App\Http\Controllers; use App\Models\Book; use Illuminate\Http\Request; class BookController extends Controller { public function index() { $user = ...

laravelvue.jsinertiajs

Struggling to understand the process of creating a new page in Express

I've created a file called ships.js in my routes folder: var express = require('express'); var router = express.Router(); /* GET Ships page. */ router.get('/ships', function(req, res, next) { res.render('ships', { tit ...

javascriptexpressroutes

Transform an array of integers into a mapping of values and corresponding IDs for selected values

I've been able to successfully load values from my API into react-select for single select, but I'm encountering some issues with multi-select. const fetch_companies = () => { API.get("/companies") ... data = data.map(({ id: ...

javascriptreactjs

Unable to bring in Vuex store into the request file

My goal is to trigger a mutation when a request is sent and a response is received. Here is my request file: import axios from 'axios' import router from '@/router' import _ from 'lodash' const instance = axios.create({ ...

vue.jsrequestaxiosstorevuex

Getting information from a JSON file with several variables: A guide for using node.js, express, and jQuery

In order to minimize the number of Ajax calls, I am attempting to send three variables in a single Ajax response. However, I am facing difficulties when trying to process the data on the client side. Let me elaborate on my issue and if sending multiple var ...

javascriptjquerynode.jsjsonexpress

Is there a way to make JavaScript function properly with PHP-generated content?

I have a PHP file that loads a variety of forms depending on an identifier passed through a GET request. Everything is functioning properly, except for my JavaScript/jQuery code. Is there a way I can refresh the JavaScript to make it work with the form? ...

javascriptphpjqueryhtml

Displaying components in Vue 2 using data from an ajax call

How can components retrieved from an ajax response be rendered? For instance, suppose I have registered a component called "Test" and within the ajax response I encounter: <p>dummy paragraph</p> <test></test> <!-- vue component ...

javascriptajaxvuejs2vue-router

Challenges with jQuery: Appending strings to a dynamically selected element

Hello everyone, I have a question regarding adding the string 'url(" ")' around my Any assistance you can provide would be greatly appreciated. Thank you! $(function() { $('#list li a').hover( function(){ $("#meow").css( " ...

javascriptjqueryhtmlcss

How the Marvel of jQuery Ignites the Power of

I require some assistance with the callbacks. It appears that they are not functioning properly. I am in the process of creating a jQuery-based game. I have designated a <div id='button'></div> for all the buttons that will be used ...

javascriptjquerycallbackjquery-events

Check to see if there is a value present in a JavaScript array

I am trying to validate the content of the data array in the code below. My goal is to ensure that when a user enters a packageid (a variable in the code), and if that packageid does not exist, the "else" statement in the conditional should be triggered. ...

javascriptjqueryif-statement

Is it possible to execute functions inline with conditional logic in react?

Is there a way to shorten the long conditions inside an inline if-else statement in React by putting a function inside it? I attempted to do this but encountered an error stating that "discount is not defined." function getDiscount(props) { const d ...

javascriptreactjs

What steps do I need to take to retrieve my paginated data from FaunaDB in a React frontend application?

I am facing a challenge when trying to access the data object that contains the keys (letter and extra) in my response from the faunadb database to the frontend react. Although I have used the map function in my frontend code, I have not been successful ...

javascriptreactjsdatabaseserverlessfaunadb

Is it possible to trigger an AJAX validation only after the jQuery validation plugin has successfully validated the input?

I utilized the jQuery validation plugin for form field validation. The goal now is to send an ajax request only when the fields are deemed valid by the jQuery validation plugin. JavaScript: $(function(){ $("#form").validate({ errorPlacement: ...

javascriptphpjqueryhtml

whenever I execute my `node file.js 1 23 44` command, nothing is displayed on the screen

When I execute node file.js 1 23 45, the expected output is supposed to be One TwoThree FourFive. However, for some unknown reason, nothing is being printed out. The script appears to run without any errors, but the desired output is just not appearing. ...

javascriptnode.js

How to update a vuex state from a separate component?

In my current project, I have a modal component that relies on a state management store. This store keeps track of whether the modal is currently active or not. I would like to be able to trigger the opening of this modal from other components or even jus ...

vue.jsvuejs2vuex

Issue with error handling not being triggered when calling SAPUI5 function()

IBAN validation within a SAPUI5 Wizard is causing some issues for me. I am utilizing a functionImport on a V2 ODataModel (sap.ui.model.odata.v2.ODataModel) to perform this validation. Despite receiving a 202 status code, the request actually failed. Here ...

javascriptsapui5