Vue.js run a code in mounted and again for restart functionality

Question

I am creating a game in VueJS, where, when the page loads, I want a method to fire, make an ajax call to an external API and create a bunch of data properties. When the player wins the round, I want to them to be able to see a button that allows them to restart the game. I am using a mounted() hook to fire the method on page load.

My question is I am not sure how to implement the restart functionality if the game setup and API call are within the mounted() function. Is there a way to run the mounted() function again?

Solution 1

Abstract your initialization into a method, and call the method from mounted and wherever else you want.

new Vue({
  methods:{
    init(){
      //call API
      //Setup game
    }
  },
  mounted(){
    this.init()
  }
})

Then possibly have a button in your template to start over.

<button v-if="playerWon" @click="init">Play Again</button>

In this button, playerWon represents a boolean value in your data that you would set when the player wins the game so the button appears. You would set it back to false in init.

Solution 2

With Vue 3 and composition API you could use onMounted hook to call a function that could be called later :

import {ref, onMounted, watch} from 'vue'

export default {
  setup() {
    const win=ref(false)

    watch(win,(newVal) => {
      if(newVal) {
        init()
      }
    })

    onMounted(()=>{
      init()
    })

    function init(){
      //init
    }
  }
}

Solution 3

You can also move mounted out of the Vue instance and make it a function in the top-level scope. This is also a useful trick for server side rendering in Vue.

function init() {
  // Use `this` normally
}

new Vue({
  methods:{
    init
  },
  mounted(){
    init.call(this)
  }
})