mamweb/vue_frontend/src/components/AddNewNode.vue

<template>
	<div class="addnewnode">
		<button v-if="types.includes('castNode')" v-on:click="selected='castNode'" :disabled="selected && selected !== 'castNode'">Část</button>
		<button v-if="types.includes('textNode')" v-on:click="selected='textNode'" :disabled="selected && selected !== 'textNode'">Text</button>
		<button v-if="types.includes('reseniNode')" v-on:click="selected='reseniNode'" :disabled="selected && selected !== 'reseniNode'">Řešení</button>
		<button v-if="types.includes('ulohaZadaniNode')" v-on:click="selected='ulohaZadaniNode'" :disabled="selected && selected !== 'ulohaZadaniNode'">Zadání úlohy</button>
		<button v-if="types.includes('ulohaVzorakNode')" v-on:click="selected='ulohaVzorakNode'" :disabled="selected && selected !== 'ulohaVzorakNode'">Vzorák</button>
		<div v-if="selected">
			<component :is='selected' :item='null' :where="where" :refnode="refnode" create></component>
		</div>
	</div>
</template>

<script>
import castNode from './CastNode.vue'
import textNode from './TextNode.vue'
import ulohaZadaniNode from './UlohaZadaniNode.vue'
import ulohaVzorakNode from './UlohaVzorakNode.vue'
//import reseniNode from './UlohaVzorakNode.vue'

export default {
	name: 'AddNewNode',
	props: {
		types: Array,
		where: String,
		refnode: Object,
	},
	data: () => ({
		selected: null,
	}),
	components: {
		castNode,
		textNode,
		ulohaZadaniNode,
		ulohaVzorakNode,
	},
	mounted: function() {
		this.$root.$on('dataUpdated',(arg) => {
			this.selected = null;
			console.log('dataUpdated'+arg);
		});
	}
}
</script>

<style>
.addnewnode {
	display: inline;
}
</style>