Imagine having a single file component structured like this:
<template>
// content irrelevant
</template>
<script>
export default {
data() {
return {
redLocations: [
"Isfahaan",
"Qom",
"Tehraan",
"Semnaan",
...
],
};
},
methods: {
colorize(paths) {
paths.forEach((path) => {
if (this.redLocations.indexOf(path.getAttribute("class")) !== -1) {
path.setAttribute("class", "red");
}
});
},
},
};
window.onload = () => {
const paths = document.querySelectorAll(".Provinces path");
paths.forEach((path) => {
if (this.redLocations.indexOf(path.getAttribute("class")) !== -1) {
path.setAttribute("class", "red");
}
});
};
</script>
<style >
...
</style>
Is there a way to access the 'colorize' method outside of the 'export default' block, for example within the 'window.onload' event in this scenario?