VUE.JS 2 : Unable to overwrite default initialized data (variable) on mounted hook

Question

Scenario

I have a generic modal component, where i use a global bus (empty VUE instance), to communicate with the modal component from whichever other component that's using it..

Issue

in the Mounted() or Created() hook for the Modal.VUE component, i'm trying to overwrite the default initialized value i need to figure out which content is to be displayed in the modal.

console.log("Selected action is : " + actionName)

... prompts out the correct actionName, so the bus functionality is there..

But when setting the variable like this :

this.modalComponent == actionName

.. and using it like this :

<h2 v-if="modalComponent == 'refund'">Refundér</h2>
<h2 v-if="modalComponent == 'empty'">Not defined</h2>

.. the modalComponent value is always 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
        })
    }
}

So what am i doing wrong here ? is it the way i'm initializing ? Is it a problem with the mounted() or created() hook ? Or.. the way i'm setting the new value ?

UPDATE : When console.log(this) :

Can you console log what is the value of 'ths' in the mounted inside bus.$on — Vamsi Krishna, May 15 '17 at 11:23
@GONG : Gives me : Uncaught TypeError: Cannot create property 'refund' on string 'modelComponent' at Vue$3.set [as $set] — Terje Nygård, May 15 '17 at 11:27
@user7814783 : See updated question with printscreen of console.log(this) — Terje Nygård, May 15 '17 at 11:29
@TerjeNygård you are using double == in bus.$on, to assign a value u should use single = — Vamsi Krishna, May 15 '17 at 11:33
@user7814783 : No.. it seems like there's a "update" issue :) console.log("Action after setting it : " + this.modalComponent) actually shows the correct value... BUT.. when using it in the HTML {{ modalComponent }} still displays empty as the initial value :) — Terje Nygård, May 15 '17 at 11:43
Not yet @user7814783 :) There is some issues regarding.. i dont know.. updating the UI for some reason ? Console.Log seems right but not in HTML when using the variable with {{ modalComponent }} — Terje Nygård, May 15 '17 at 12:58
@TerjeNygård could you create a jsfiddle? so that we can test out — Vamsi Krishna, May 15 '17 at 13:07

Bert · Answer 1 · 2017-09-22T15:38:00.353

2

Your this is not the Vue in addition to using the equality operator instead of the assignment operator. Try

const self = this
bus.$on('on-action', function (actionName) {
    console.log("Selected action is : " + actionName)
    self.modalComponent = actionName
})

or

bus.$on('on-action', function (actionName) {
    console.log("Selected action is : " + actionName)
    this.modalComponent = actionName
}.bind(this))

or

bus.$on('on-action', actionName => this.modalComponent = actionName)

See How to access the correct this inside a callback?

edited Sep 22 '17 at 15:38

answered May 15 '17 at 14:03

Bert

80,741
17
199
164

Thanks for the answer :).. It's still displaying the default value of modalComponent, when using it like {{ modalComponent }} in the html. Console.Log displays everything correct.. Seems like the UI isn't updated with latest value ? – Terje Nygård May 15 '17 at 21:19
Worth to mention, is that the FIRST time i'm clicking the button which fires the emit to the bus, the "bus.on('on-action') is not fired.. (aka no console.log results...) ? – Terje Nygård May 15 '17 at 21:22
@TerjeNygård Can you throw together an example demonstrating the bug, or make the code available on something like github? – Bert May 15 '17 at 21:27
I'll make it available.. hold on a sec :) – Terje Nygård May 15 '17 at 21:31

score 0 · Accepted Answer · answered May 16 '17 at 23:02

Allright... I figured out a better way to handle this problem with using state..

Source page (Usage) :

<a @click="toggleModal('refund')" class="btn btn-success btn-fixed-
  width">Refundér</a>
<a @click="toggleModal('move')" class="btn btn-success btn-fixed-
  width">Flytt</a>

Source page (Vue code to show modal component) :

toggleModal: function(actionName){
            this.$store.dispatch('switchModalComponent', {
                modalComponent: actionName
            })
            this.showModal = true;
        }

Store.JS code :

export default new Vuex.Store({ 
    state: {
        visibleModalComponent: "empty"
    },
    getters: {
        visibleModalComponent: state => state.visibleModalComponent
    },
    actions: {
      switchModalComponent({ commit }, modalComponent){
        commit(types.VISIBLE_MODAL_COMPONENT, modalComponent)
    },
     mutations: {
         [types.VISIBLE_MODAL_COMPONENT] (state, modalComponent) {state.visibleModalComponent = modalComponent}
    }

Mutationtypes.JS

export const VISIBLE_MODAL_COMPONENT = "VISIBLE_MODAL_COMPONENT"

Modal component (switching content based on source page context)

<h1>{{ visibleModalComponent.modalComponent }}</h1>

<script>
    import { mapGetters } from "vuex"

    export default {
        name: "modal",
        computed: {
            ...mapGetters(["visibleModalComponent"])
        }
    }
</script>

This way... you don't need to bother with a new VUE instance (bus), and the issues with using emit and on (which also doesn't behave 100%, due to first click not-working issues).

VUE.JS 2 : Unable to overwrite default initialized data (variable) on mounted hook

2 Answers2