How to get the context of the template? - vue.js

Question

Consider the following Vue component
<template>
<div class="myclass">
<div class="myotherclass">I am in {{getcurrentClass()}}</div>
</div>
</template>
<script>
export default {
data() {
return {
currentClass: null
}
},
methods: {
getCurrentClass() {
// code to get the class in the context of the place
// it is called in the template
}
}
}
</script>
What I am trying to understand is how to account for the "template context" in a method. In the code above getCurrentClass() would return the class of the element (this is an example, it can be explained to "name of the element", or "id of the element", ...).
Is this at all possible? If so I would appreciate even a general pointer (and I can post the response once I have a solution) - I am not sure which direction I should be looking at to start with.

Answer 1

You can use basic javascript dom referencing techiniques inside the mounted lifecycle hooks.
<template>
<div class="myclass">
<div id="elem" :class="getcurrentClass('myotherclass')">I am in {{ currentClass }}</div>
</div>
</template>
<script>
export default {
data() {
return {
currentClass: null
}
},
methods: {
getCurrentClass(className) {
this.currentClass = className;
return className;
}
},
mounted() {
// here you can get reference to a dom element by using basic javascript dom referencing techniques
const elem = document.querySelector("#elem");
element.classList ....
}
}
</script>
You can also use the Vue $refs object. If used on a child component, it will give you the reference to that child component instance. If used on a plain DOM element, it will give a reference to that element. Read more from here
<template>
<div class="myclass">
<div ref="myElem" :class="getcurrentClass('myotherclass')">I am in {{ currentClass }}</div>
</div>
</template>
<script>
export default {
data() {
return {
currentClass: null
}
},
methods: {
getCurrentClass(className) {
this.currentClass = className;
return className;
}
},
mounted() {
// here you can get reference to a dom element or child component context by using $refs object
const elem = this.$refs.myElem;
myElem.classList ....
}
}
</script>

Answer 2

You could set the currentClass = <className> in state then render it in template:
<template>
<div class="myclass">
<div :class="getcurrentClass('myotherclass')">I am in {{ currentClass }}</div>
</div>
</template>
<script>
export default {
data() {
return {
currentClass: null
}
},
methods: {
getCurrentClass(className) {
this.currentClass = className;
return className;
}
}
}
</script>