Vue JS已安装（）

Mandy西门2020-03-11

我正在VueJS中创建一个游戏，在该页面中，当页面加载时，我需要一种方法来触发，对外部API进行ajax调用并创建大量数据属性。当玩家赢得回合时，我希望他们能够看到一个允许他们重新开始游戏的按钮。我正在使用mounted()挂钩在页面加载时触发该方法。

我的问题是，如果游戏设置和API调用在mounted()功能内，我不确定如何实现重新启动功能。有没有办法mounted()再次运行该功能？

Tony宝儿2020/03/11 17:22:22

将您的初始化抽象为一个方法，然后从mounted其他任何位置调用该方法。

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

然后可能在模板中有一个按钮可以重新开始。

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

在此按钮中，playerWon代表您数据中的布尔值，您将在玩家赢得游戏时设置该值，以便出现该按钮。您将在中将其设置回false init。

梅Harry米亚2020/03/11 17:22:22

您也可以移出mountedVue实例，并使其成为顶层作用域中的函数。这也是在Vue中进行服务器端渲染的有用技巧。

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

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

Newest Answer