Situation
I created a generic modal component that uses a global bus (empty VUE instance) to communicate with the modal component from any other component that utilizes it.
Problem
In the Mounted() or Created() hook for the Modal.VUE component, I am attempting to overwrite the default initialized value in order to determine which content should be displayed in the modal.
console.log("Selected action is : " + actionName)
The above code correctly logs the actionName, indicating that the bus functionality is working as intended.
However, when setting the variable like this:
this.modalComponent == actionName
And using it like this:
<h2 v-if="modalComponent == 'refund'">Refund</h2>
<h2 v-if="modalComponent == 'empty'">Not defined</h2>
The modalComponent value always remains empty as initialized.
Script Code:
<script>
import bus from '../global/bus.js'
export default {
name: "modal",
data(){
return {
modalComponent: "empty"
}
},
mounted() {
bus.$on('on-action', function (actionName) {
console.log("Selected action is : " + actionName)
this.modalComponent == actionName
})
}
}
What could be the issue here? Is it related to how I'm initializing the component, the mounted() or created() hook, or the way I'm setting the new value?
UPDATE: When I console.log(this): https://i.sstatic.net/jMKxE.png