How To Trigger A Function Using @click Inside Infowindow Of Google Maps In Vue Js?
Solution 1:
New Solution
Call a global method from InfoWindow
using plain-old click handler.
`onclick="removePoint(${vm.markerId})"`
Then use a closure to access your vm from the global method.
const vm = this
window.removePoint = function(id) {
vm.removePoint(id)
}
IF you have multiple instances, you will need to extend this approach.
Old Solution
There are 2 issues here.
First, fix the syntax error concerning the quote.
vm.markerid + ")\">Remove</a>"
Even better, take advantage of template strings to avoid this kind of quote insanity.
vm.infowindow = new google.maps.InfoWindow({ content:`
<a class="btn btn-danger" @click.native="removePoint(${vm.markerid})">Remove</a>`, maxWidth: 300 });
Second, any function inside a vue template is always within the scope of the component. Assume a this.
object is placed in front. So calling removePoint
is really calling this.removePoint
.
Define function inside instance.
vm.removePoint = function(id) {
console.log(`removing point ${id}...`)
}
Or make sure your component options defines removePoint
in the methods
section.
You can also define removePoint globally (on the window object) and call $window.removePoint(" + vm.markerId + ")"
from the template if using a plugin such as https://www.npmjs.com/package/window-plugin.
@click.native=\"$window.removePoint(" + vm.markerid ...
function removePoint(id) {
console.log(`removing point ${id}...`)
}
Solution 2:
@StevenSpungin solution worked like a charm. Thanks.. Just to make it simple.
while creating marker content,
markerContent += `<button onclick='editVehicle(${vehicle.id});'>EDIT</button>`;
and on created(any component)
created() {
let that = this;
window.editAppointment = function(vehicleId) {
console.log("vehicleId", vehicleId);
}
}
Solution 3:
in your mounted method map the window method to the vue method:
mounted(){
this.initMap();
window.linkToKey = this.linkToKey; // vue method wired to window method
},
and in the html for your infoWindow:
const contentString =`<img onClick="linkToKey('${video.key}')" src="images/${video.key}.png">`;
const infowindow = new google.maps.InfoWindow({
content: contentString,
});
and then you can define your vue method as expected:
methods: {
linkToKey(key) {
console.log('key', key);
this.$router.push(`/video/${key}`);
},
then the window method is wired to your vue method and you can do everything as expected on the click of any items in the InfoWindow
Post a Comment for "How To Trigger A Function Using @click Inside Infowindow Of Google Maps In Vue Js?"