On using the Vue.js mounted lifecycle hook

Published on 2019-10-05 • Modified on 2019-10-05

This a very useful hook to initialize some stuff once your Vue.js component has been mounted. Open your browser JavaScript console to check the results (I didn't use the alert() Js function!).


Hello world!


<div class="h3" id="vue">
    <h3>Hello world!</h3>
    <button v-on:click="init">init()</button>
</div>

<script>
    "use strict";
    let vue = new Vue({
        delimiters: ['{', '}'],
        el: '#vue',
        methods:{
            init() {
                console.log('Component text:'+ this.$el.textContent)
            }
        },
        mounted() {
            console.log('the init() method was called from the mounted() one.')
            this.init()
        }
    });
</script>

 More on Stackoverflow  More on the web


» Comments

Privacy-focused with Commento. (Comment system added on 2019-11-22: be the first! 🥇)

Hello world!