Как предотвратить запуск нескольких копий компонентов?

Question

[run182]

Если второй раз вызвать метод, то создаться копия компонента, как это предотвратить?

<div id="app">
   <component v-bind:is="currentComponent"></component>
</div>

new Vue({
	el: "#app",
	name: 'root',
	data: function () {
		return {
			currentComponent: 'game-start-view'
		}
	},
	methods: {
		getLevel() {
			this.currentComponent = "game-level";
		},
		getGame() {
		  this.currentComponent = "game-agreement";
		},
		stopGame() {
			this.currentComponent = "game-start-view";
		}
	}
});

Answer 1

[Игорь Стасюк]

Какой-то вы хардкорщик, а что мешает сделать разными компонентами это изначально и привязать все к v-if и отображать нужный, ну или слотами сделать похожую логику

Comments

[run182]

Только начал учить vue, нашел такое решение вот тут - https://ru.vuejs.org/v2/guide/components-dynamic-a...

[run182]

А можете пример показать как было бы более правильно? Или как решить проблему в моем случае?

[Игорь Стасюк]

run182, можно конечно и так, я думаю в вашем случае это лучше подойдет

[run182]

Игорь Стасюк, а как можно решить проблему с тем, что при каждом вызове метода создается еще один компонент?
Как можно к примеру убить работающий компонент или сделать блокировку на 1 запущенный экземпляр?

[Игорь Стасюк]

run182, Предположу что так

<div id="app">
   <game-start-view v-if="!isGameStarted"></game-start-view>
   <game-level v-else"></game-level>
   <game-agreement v-show="showAgreement"></game-agreement>
</div>