Execute a Vue function from a Mapbox pop-up

I have a mapbox popup with a button inside it that I want to trigger a method from my Vue component.

This is how I set up my popup:

const popup = new mapboxgl.Popup({ focusAfterOpen: false })
        .setLngLat(coordinates)
        .setHTML('<button id="button" @click="myMethod">Click here!</button>')
        .addTo(map);

The method in my Vue component looks like this:

myMethod() {
  console.log("clicked");
},

I successfully added an event listener to the button, but the function defined in my Vue component doesn't execute when the button is clicked.

This is my event listener setup:

var button = document.getElementById("button");
      button.addEventListener("click", function() {
        console.log("clicked");
      });

Answer №1

If you want to replace setHTML, consider using setDOMContent

<template>
 <div id="map"></div>
 <div id="popup" ref="htmlPopup" @click="popupclicked">
</div>
</template>

<script>

...
addPopup() {
    const popup = new mapboxgl.Popup({ focusAfterOpen: false })
        .setLngLat(coordinates)
        .setDOMContent(this.$refs.htmlPopup)
        .addTo(map);
} 
popupclicked () {
   console.log("Popup clicked");
}
...
</script>

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

What techniques can I use to generate code dynamically for transferring an object to a different Node process?

I'm in the process of developing a node server that must execute potentially unsafe code. To ensure security, I am utilizing a Sandbox API that guards against attacks and provides results and outputs from scripts. This API employs a modified global ob ...

Inspect every div for an id that corresponds to the values stored in an array

I am in the process of developing a series of tabs based on a preexisting set of categories using the JavaScript code below. Now, I am looking to expand this functionality to target specific IDs within the DIV ID corresponding to values from an array in JS ...

What is the best way to ensure reactivity in the Vue 2 Provide / Inject API?

After setting up my code in the following manner, I successfully managed to update checkout_info in App.vue using the setter in SomeComponent.vue. However, I noticed that the getter in SomeComponent.vue is not reactive. // App.vue export default { pr ...

Utilizing the background page to maintain a value required by an injected JavaScript code

{ "name": "coffee", "manifest_version":2, "version": "1.0", "description": "testing coffee app", "browser_action": { "default_icon": "icon.png" , "default_title": "My Task List", "default_popup": "popup.htm ...

Flickering transitions in Phonegap and jQuery Mobile pages

As a beginner in Phonegap/jQuery Mobile, I have encountered a frustrating issue of a white screen appearing during page transitions. Despite trying various solutions found online, such as using -webkit-backface-visibility:hidden;, the problem persists. I ...

"Troubleshooting Laravel 5: Why isn't the Ajax post Method Working in

Currently, I am diving into Ajax using JavaScript and aiming to implement an Ajax post method in Laravel 5.4. Below are the snippets from my various files... Routes Route::group(['prefix' => 'admin'],function(){ Route::post(&ap ...

An npm list is always full of modules

As I prepare to install a package using npm, I noticed that my folder for the new project already has numerous items listed when I run npm list. Is it normal for the folder not to be empty at this stage? Have I made an error somewhere? ...

Angular 4.0 has discontinued the use of the ngGetContentSelectors() method

There has been a deprecation of the method ngGetContentSelectors() in Angular 4.0. Can you suggest an alternative for this? ...

What is the process for retrieving document field values for an item in Umbraco 7 backoffice?

I have developed a unique Umbraco 7 dashboard where I aim to retrieve specific field details from instances of a particular document type in my Umbraco CMS. After successfully obtaining a list of all documents of the specified type using entityResource.ge ...

Bandcamp API sales data retrieval feature

Looking for assistance with a call to the Bandcamp API. Every time I request /http://bandcamp.com/api/sales/1/sales_report/, I receive this message in the response: /"error_message":"JSON parse error: 757: unexpected token at ''/ ...

Send the image file location to a child component in Nuxt.js

I'm having trouble understanding why my child component, which has an image as props, is not displaying the image correctly. Here is an example of how I am using it: <img :src="logo" alt="logo" /> //... props: { logo: { type: String, ...

Regex for value substitution

I've always struggled with understanding regex. Even after trying various tools, I still couldn't grasp it. Can someone please provide me with assistance? I'm working with jquery. For example, if I have a css text-shadow property like rgba( ...

Issue with ng-repeat not updating in Meteor and Angular collaboration

(This is not one of those "Oh I forgot $scope.$apply()" problems) Question is: How can I achieve live binding with ng-repeat and a reactive helper function in the controller? Let's focus on the code: index.js: <body ng-controller="AppCtrl as ap ...

Using JQuery to delete an item by clicking on the delete button and then clicking on the item to remove it

I am currently using jQuery to dynamically create items on an HTML canvas for users to drag around and create drawings in a style similar to Microsoft Visio. However, I am struggling with how to remove these items once they have been created. While I know ...

Encountering a problem during the installation process of cldr

GET `https://github.com/unicode-cldr/cldr-units-modern/archive/36.0.0.zip` Uh oh! There was an error while making the request. The error mentioned above occurs when attempting to: npm i cldr-data We have been using an Angular project for quite some time ...

Using Google Chart API to create stacked bar charts with annotations using symbols

I am trying to annotate the bars in my stacked bar chart with currency symbols for profit and costs. While I have been able to successfully annotate the bars without currency symbols, I am facing difficulties in displaying them with the $ prefix. Can anyo ...

What could be causing my iframe to not adjust its size according to its content?

My attempt at resizing a cross-site iframe is not working as expected, despite following the guidance provided here. The iframe on my page seems to remain unaltered in size, and I can't figure out what mistake I might be making. The current location ...

Storing query for later utilization using form and javascript

I have implemented a function to create charts using the following code snippet: $('#button_submit').click(function() { var start_date = $('#start_date').val(); var end_date = $('#end_date').val(); var type = $( ...

Passing events from Vue to child components

Looking for a way to make clicking on the outer pill element have the same effect as clicking on the checkbox itself? Check out this HTML code that renders these little boxes: https://i.sstatic.net/hspnF.png <div class="token-checkboxes"> <spa ...

Utilizing CSS or JavaScript to define the input type

I currently have a group of checkboxes displayed on a webpage within a DIV labeled OPTIONS, shown below: <div id="options"> <input type="checkbox"..... > <input type="checkbox"..... > <input type="checkbox"..... > <input t ...