'vm' object outside Vue instance and called inside method mounted undefined

Question

When a function is used outside the vue instance and passed inside method mounted, why is the reference to 'vm' lost?

var vm = new Vue({
    el: '#app-4',
    data: {
        isLoading: true
    },
    mounted: function() {
        hello();
    }
});


function hello() {
    console.log(JSON.stringify(vm));
    //vm.isLoading = true;
    setTimeout(function() {
        console.log(JSON.stringify(vm, replacer));
        //vm.isLoading = false;
    })
}

//Extra code ignore
seen = []; 

var replacer = function(key, value) {

if (value != null && typeof value == "object") {
    if (seen.indexOf(value) >= 0) {
        return;
    }
    seen.push(value);
}
return value;

};

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="app-4">
    <p v-if="isLoading">Vuejs loading...</p>
</div>

emanek · Accepted Answer · 2017-06-28 08:08:04Z

4

It seems that mounted() is fired from the Vue constructor, i.e. before the vm variable can be even assigned. So the vm reference is not lost, but it is still undefined when hello() is called.

The timeout() callback is called later when the Vue constructor already returned and vm variable is assigned. The chronology of these events is also visible in the console.

var vm = new Vue({
    el: '#app-4',
    data: {
        isLoading: true
    },
    mounted: function() {
        hello();
    }
});


function hello() {
    console.log("before timeout: " + typeof(vm));
    //vm.isLoading = true;
    setTimeout(function() {
        console.log("after timeout: " + typeof(vm));
        //vm.isLoading = false;
    })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="app-4">
    <p v-if="isLoading">Vuejs loading...</p>
</div>

edited Jun 28, 2017 at 8:08

answered Jun 28, 2017 at 8:02

emanek

4212 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

guilima Over a year ago

Thanks to explain. So what is the best Vue way to write this code? I don't like the idea of using setTimeout. In a second try I passed the 'this' as parameter in the hello function and worked, but err.. Shouldn't Vue deal with it in a better way?

emanek Over a year ago

Maybe you could make the hello() function a method within the Vue instance. Then you do not even need to assign vm and you can just refer to this... v1.vuejs.org/guide/events.html

guilima Over a year ago

Yeah, I could do that or call it outside of the Vue instance. Either way, it will work. Probably I need to change my mind and roll like that.

Collectives™ on Stack Overflow

'vm' object outside Vue instance and called inside method mounted undefined

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related