I am working on a Vue application that retrieves HTML content from an API. This HTML contains blocks with the class
<div class="play-video">...</div>Using axios to call the API and a promise, I insert the content into the DOM like this:
<div v-if="content" v-html="content"></div>My concern is how to attach click events to children elements with the .play-video class. Do I need to monitor changes in the content property and then use vanilla JS query selectors to bind the events?
To implement event delegation, you can utilize a @click handler and verify the target element by using the Element.closest() method.
new Vue({
el: "#app",
data: () => ({
content: null
}),
methods: {
handleClick(e) {
const elt = e.target.closest(".play-video");
if (elt) {
console.log("Got a click on .play-video or a child element")
}
}
},
mounted () {
// simulate loading content
setTimeout(() => {
this.content = `
<div>
<p>Some other element</p>
<button>I'm not part of <code>.play-video</code></button>
<div class="play-video">
<p><button>Click me, I am!</button></p>
</div>
</div>
`
}, 1000)
}
})<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddaba8b89deff3e8f3efec">[email protected]</a>/dist/vue.min.js"></script>
<div id="app">
<div v-if="content" v-html="content" @click="handleClick"></div>
<p v-else>Loading...</p>
</div>If you specifically want to capture click events only on the .play-video element itself and exclude its children, you can omit the .closest() call and use
if (e.target.matches(".play-video") {
// ...
}
For information on browser compatibility and a possible polyfill, refer to https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#polyfill.
As a newcomer to the world of React, I keep encountering an unexpected token error related to the ":". Can someone please assist me with understanding the correct syntax for including multiple styles within the Box component provided below? Additionally, h ...
I'm currently refactoring some Jquery code and I've heard that chaining can improve performance. Question: Does this also apply to chains involving queue() and filter()? For instance, here is the un-chained version: var self = this, co = ...
I've encountered an issue while trying to send data from the frontend (using React) to the backend (Express) via an HTML form, and subsequently clearing the fields after submission. The code snippet below illustrates what I'm facing. In this scen ...
Hey there fellow coders! I've been facing an issue while trying to make a database query using the odbc package found at https://www.npmjs.com/package/odbc. Interestingly, I can successfully run queries using FlySpeed SQL Query. However, when attempti ...
Snippet: // Generate a blank canvas let canvas = document.createElement('canvas'); canvas.width = 100; canvas.height = 100; document.body.appendChild(canvas); // Access the drawing context let ctx = canvas.getContext('2d'); // Extrac ...
Currently, my API is built using PHP Laravel and MySQL, which uses snake_case for field names. I am considering using the same naming convention in client-side JavaScript to make it easier to transfer field names from PHP code to JavaScript code and when m ...
Greetings! I am new to using react js and decided to create a quiz application. However, I encountered an error when the render function was called. Below is my webpack.config file: module.exports = { entry: { app: './src/index.js' }, ...
I am a beginner in the realm of react and have encountered an issue with my app, which is a simple e-commerce platform. The problem arises when I try to enter the shipping address during the checkout process, as it throws an error. TypeError: Cannot read ...
I am encountering an issue with my API data where it is being called twice in the terminal. Additionally, I am trying to display this data on my page template but for some reason, it is not showing up. Here is the code snippet in question: Here is my code ...
I tried using the class-validator decorator library for validation processes on my sample project. However, it doesn't seem to be working as expected. The sample project aims to create projects based on user inputs, and I'm attempting to validate ...
Looking to convert a string of JavaScript objects into function arguments. The string format is as follows: "{ "item1": "foo 1", "item2": "bar 1" }, { "item1": "foo 1", "item2": "bar 2" }" While I can use JSON.parse to turn it into an array, the challeng ...
Looking to alternate the background color of li or tr elements consecutively. Please note: A static class will not work as I need to call this in a while loop. The desired output should look like: <li>line1</li> //white background <li> ...
I am currently working on a project using A-frame() along with the networked A-frame component: https://www.npmjs.com/package/networked-aframe To view the project, click here: I encountered an issue when attempting to replace the following code in scene. ...
Currently working on migrating multiple repositories to the monorepo architecture using a POC bootstrapped with Turborepo. Facing an issue with misconfigured ts module aliasing. Have a single ui package where I am attempting to export a button component fr ...
I've been customizing the Polymer paper-slider element to handle an enumerated list and cycle through these values in the slider instead of just showing numeric values. However, I'm struggling with getting the styles to align properly. When you r ...
When working with a Django Form, I am incorporating a datepicker. While the solution may involve JS and HTML, my query remains specific. date_field= forms.DateField( input_formats=['%Y-%m-%d'], widget=forms.DateInput( format=& ...
Here is a sample json response : {id: 1, name: a} {id: 2, name: b} {id: 3, name: c} {id: 4, name: d} {id: 5, name: e} {id: 6, name: f} I am looking to organize these by pairs in my React component like so : <div className="group-item"> ...
I developed a JS snake game using HTML5 canvas. In the event that the user loses, the score is transmitted to the database through an AJAX call in my PHP script. The PHP code then compares this score to the current highscore and updates it if needed. Howev ...
Is it possible to generate a new array consisting of all elements ranging from the nth to the (n+k)th positions within an existing array? ...
My goal is to extract a list of URLs from the request body, pass them to a request function (using the request module) to retrieve data from each URL, and then save that data to MongoDB. The response should be sent only after all requests are completed, in ...