web-dev-qa-db-fra.com

Vue JS monté ()

Je crée un jeu dans VueJS, où, lors du chargement de la page, je souhaite qu'une méthode soit déclenchée, passe un appel ajax à une API externe et crée un ensemble de propriétés de données. Lorsque le joueur gagne le tour, je veux qu’ils puissent voir un bouton qui leur permet de redémarrer la partie. J'utilise un crochet mounted() pour déclencher la méthode lors du chargement de la page.

Ma question est que je ne suis pas sûr de savoir comment implémenter la fonctionnalité de redémarrage si la configuration du jeu et l'appel d'API font partie de la fonction mounted(). Existe-t-il un moyen de relancer la fonction mounted()?

Merci!

javascriptmodel-view-controllervue.jsvuejs2
28
lnamba

Résumez votre initialisation dans une méthode et appelez-la depuis mounted et où vous voulez.

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

Ensuite, possédez éventuellement un bouton dans votre modèle pour recommencer.

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

Dans ce bouton, playerWon représente une valeur booléenne dans vos données que vous définissez lorsque le joueur gagne la partie et que le bouton apparaît. Vous le remettriez à false dans init.

57
Bert