Есть экземпляр приложения:
<div id="app">
<component v-bind:is="currentComponent"></component>
</div>
new Vue({
el: "#app",
name: 'root',
methods: {
stopGame() {
this.currentComponent = "game-start-view";
}
}
});
1 компонент:
this.$root.$on('levelFinish', function () {
$this.levels.current++;
if($this.levels.current <= $this.levels.length) {
//alert("Следующий уровень!");
} else {
alert("Игра закончена.");
this.$root.stopGame();
}
});
.
2 компонент (по клику производит действие):
this.$root.$emit('levelFinish');
В 1 компоненте вложен 2 компонент. После вызова stopGame() включается 3 компонент, в котором можно заново выбрать 1 компонент. Когда первый раз проходишь уровни, то все ок, при достижении levels.length игра останавливается. Но когда запускаешь ее повторно, то при каждом клике вызывается окно alert("Игра закончена.");, а при 3 запуске окно появляется дважды.
Получается, что у меня каждый раз создаются новые экземпляры компонента и продолжают работать старые. Как мне при вызове stopGame() прекращать работу с текущим компонентом, чтобы при следующем запуске они не задваивались?
