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ボタンが表示されますので、プレイヤーがゲームに勝利したときに設定しますあなたのデータのboolean値を表しています。 initでfalseに戻します。