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!).


HTML demo of snippet

{ hello }


<script>
    "use strict";
    const vueSnippet = new Vue({
        delimiters: ['{', '}'],
        el: '#vue_47',
        data: {
            hello: "{{ 'hello_world'|trans({}, 'snippet') }}"
        },
        methods:{
            init() {
                console.log('{{'p_47_1'|trans({}, 'snippet') }}'+this.$el.textContent)
            }
        },
        mounted() {
            console.log('{{'p_47_2'|trans({}, 'snippet') }}');
            this.init()
        }
    });
</script>