I am currently utilizing the Vue-Wrapper for heatmap.js, which can be found at this link. However, I am encountering an issue where I am unable to call the heatmapInstance "h337" in my Vue-Component. While I can utilize the functionality, I am struggling with calling methods like getValueAt because I do not have access to the instance.
UPDATE: I have included some code below. Below is a snippet of my component where I intend to invoke these methods. Particularly, within the mouseposition() function, I need to call the method "getValueAt" (referred to as heatmapInstance), and the heatmap-vue.js has been imported into my main.js using webpack.
<template>
<v-container>
<v-row>
<v-col cols="6">
<v-card min-height="46.5em" elevation="3">
<v-card-text class="px-0">
<v-col cols="12" xl="6">
<span class="tooltip" style="display: none">tooltip</span>
<heatmapjs-vue
class="heatmapjs-container"
:max="max"
:min="min"
:data="heatData"
>
<v-img
contain
height="100%"
class="feet"
src="../assets/test_links_fuss-cutOut.svg"
></v-img>
</heatmapjs-vue>
</v-col>
...
</template>
<script>
export default {
data: () => ({
min: null,
max: null,
heatData: [],
...
}),
methods: {
...
mouseposition() {
this.demoWrapper = document.querySelector(".heatmapjs-container");
this.tooltip = document.querySelector(".tooltip");
this.demoWrapper.onmousemove = (ev) => {
var x = ev.layerX;
var y = ev.layerY;
// getValueAt gives us the value for a point p(x/y)
var value = heatmapInstance.getValueAt({
x: x,
y: y,
});
console.log(value);
};
},
},
mounted() {
this.mouseposition();
},
created() {},
};
</script>
<style>
...
</style>