My situation involves a straightforward component that utilizes a mixin shared across various components that have similar functionalities.
However, upon running it, an issue arises:
The error message "Property or method 'activeClass' is not defined on the instance but referenced during render" keeps appearing.
Provided below is the snippet of my mixin:
<script>
export default {
data() {
return {
opened: false,
identity: ''
}
},
computed: {
activeClass() {
return {
active: this.opened
};
}
},
created() {
window.EventHandler.listen(this.identity + '-toggled', opened => this.opened = opened);
},
methods: {
toggle() {
window.EventHandler.fire('toggle-' + this.identity);
}
}
}
</script>
Next is the code for my component:
<template>
<span class="pointer" :class="activeClass" @click="toggle"><i class="fas fa-search"></i></span>
</template>
<script>
import Trigger from '../../mixins/Trigger';
export default {
data() {
return {
mixins: [Trigger],
data() {
return {
identity: 'language'
}
}
}
}
}
</script>
Despite my efforts, I am unable to access the activeClass computed property within the component. Any thoughts on what might be causing this occurrence?