Vue JS mount()

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表示您在玩家赢得游戏时设置的数据中的布尔值,以便显示按钮.您可以将其设置为false init.