Vue JS Mounted（）

Question

VueJSでゲームを作成しています。ページが読み込まれると、メソッドを起動し、外部APIにajax呼び出しを行い、一連のデータプロパティを作成します。プレイヤーがラウンドに勝ったとき、ゲームを再開できるボタンを表示できるようにしたいと思います。 mounted()フックを使用して、ページの読み込み時にメソッドを起動しています。

私の質問は、ゲームのセットアップとAPI呼び出しがmounted()関数内にある場合、再起動機能を実装する方法がわかりません。 mounted()関数を再度実行する方法はありますか？

ありがとう！

Answer 1

初期化をメソッドに抽象化し、mountedおよびその他の任意の場所からメソッドを呼び出します。

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

次に、テンプレートに最初からやり直すためのボタンがある場合があります。

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

このボタンでは、playerWonは、プレイヤーがゲームに勝ったときに設定するデータ内のブール値を表し、ボタンが表示されます。 initでfalseに戻します。