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

/**
 * I am using a JavaScript module to isolate the code of each snippet.
 * In fact it's a Vue.js mixin. Take the code called by the mounted()
 * or the snippetXX() function.
 */
export default {
  methods: {
    snippet47 () {
      console.log('Content: ' + this.$refs.snippet47_hello.innerHTML)
    }
  },
  mounted () {
    if (this.isArticle(47)) {
      console.log('Call of snippet47() from mounted().')
      this.snippet47()
    }
  }
}

HTML demo of the snippet

More on Stackoverflow More on the web Random snippet

Work with me!