I'm working with a loop of data and have a modal for each iteration
<div ref="vuemodal-{{loop.index}}">
Each modal is a bootstrap modal, and I want to bind an event to them that triggers whenever the modal is closed
mounted(){
Object.keys(this.$refs).map((val) => $(this.$refs[val]).on("hidden.bs.modal",
this.doSomethingOnHidden))
}
However, I seem to be having trouble accessing the object correctly
One important thing to note is that your ref is currently a static string, not dynamic. To make it dynamic, you need to bind it using the v-bind or : operator.
Another point to keep in mind is that mustaches cannot be used within HTML attributes, meaning {{loop.index}} will not function as intended.
Check out the demonstration below:
new Vue({
el: "#app",
mounted() {
Object.keys(this.$refs).map((val) => console.log(val))
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="index in 5" :ref="`vuemodal-${index}`">
It's a bootstrap modal and I'd like to attach an event to each one when the modal is closed.
</div>
</div>For a client, I have recently created 4 websites using Wordpress. Each site includes a sidebar with a script that utilizes the Google Maps API to estimate taxi fares. Strangely, the script works perfectly on the home page of each site, but fails to funct ...
I am currently developing a third-party application that will be utilized across multiple domains. My main goal is to manage a session per user who uses the app, which led me to implement the express-session module for this purpose. However, I encountered ...
Check out my jsFiddle demonstration illustrating the issue: Example Here is the HTML structure: <select id="drop1" data-jsdrop-data="countries"></select> <select id="drop2" data-jsdrop-data="countries2"></select> Below is the ...
Having a small issue with my code where I am receiving an HTML response from a web service as a java String. I need to display this String as HTML on my webpage, but the problem is that there are some script tags in the form of <% ... %> which are sh ...
I'm attempting to create a flashing link upon site load, but I'm encountering issues with the animation not working in Vue. Interestingly, when testing the same code without Vue in a separate file, it functions perfectly fine. Below is the spec ...
After users complete a quiz, they receive their results. The client now wants to implement a "Print Results" feature that opens in a new window with customized CSS. I'm trying to figure out how to transfer the results to the new window using JavaScri ...
One scenario that I encountered involved using a select element to choose languages. Initially, when the value or code from the select language is obtained, it is saved in local storage. Subsequently, this stored language code is used as a parameter in an ...
I am currently working on a project that requires users to interact with the file system directly from their browsers. While I have extensive experience in writing client-side JavaScript code and using Node.js scripts for tasks like web scraping, data anal ...
I am in the process of creating a Notes.ts file specifically for TypeScript notes. I require syntax highlighting but do not want to use eslint. How can I prevent eslint from running on my notes file? Directory Structure root/.eslintignore root/NestJS.ts r ...
When I try to run this code snippet, I sometimes encounter an error message that says: SyntaxError: Unexpected token C in JSON at position 0. function fetchData(user_country) { fetch(`https://covid19-monitor-pro.p.rapidapi.com/coronavirus/cases_by_day ...
Utilizing ajax to transfer data from a sophisticated custom field wysiwyg editor. Within the markup provided, I am specifically addressing the div with the 'bio' class. However, upon receiving the data, it is consolidated into one large paragraph ...
I'm facing an issue with adding tasksMap to the useEffect dependency array, as it causes an infinite loop. Can someone guide me on how to resolve this? To ensure that the user sees an updated view of tasks that are added or modified, I need the app to ...
I need help with restricting user input in a text field to only allow letters, numbers, and dashes (-). For alphanumerics only - "The alphanumeric character set includes numbers from 0 to 9 and letters from A to Z. In the Perl programming language, the un ...
Although this code is functional, it briefly displays incorrect data because a blank token is instantiated before being populated in the subscribe function. Is there a way to move the instantiation into the subscribe function or provide all necessary par ...
I need help with saving a created element to the database so that it remains on the page even after refreshing. Any assistance would be greatly appreciated. Thank you. document.getElementById("insert").onclick = function(){ if(document.getElementById( ...
Is there a way to add a paragraph element after a specific div class element? I am looking to include a p element within the second text div class. I attempted a solution, but it is not producing the desired result. The current solution is not effective. ...
I have an XML object that I need to parse in order to extract startdate and end date data. My goal is to compare and group appointments with the same date together, but I don't have much experience manipulating XML - I'm more comfortable with JSO ...
Currently, I'm tackling an issue with a dropdown feature. My goal is to have the dropdown results sorted when the user enters something into the input field. The values in the dropdown are sourced from an array. For instance, codeList = [N1, N2, N3, ...
Looking to add a click event to the image in my EJS file, here's the EJS code snippet: <div class="container" id="comments"> <div class="row"> <div class="col-lg-12"> <div class="well"> ...
Currently, I am in the process of creating an app using Reactjs and Material-UI. The main requirement is for users to input a mask of specific length containing various letters such as I, V, and C. In search of a suitable design pattern or solution for thi ...