mamweb/vue_frontend/src/components/CastNode.vue

<template>
	<div class="castnode">
		<!--pre>CastNode {{item}} {{typeof(item)}}</pre-->
		<div v-if="editorShow">
			<input type="text" v-model="currentText" />
			<button v-on:click="updateText">Uložit</button>
			<button v-on:click="currentText = originalText;editorShow=!editorShow;">Zahodit úpravy</button>
		</div>
		<div v-else>
		<h4>{{ currentText }} <button v-on:click="editorShow=!editorShow">Upravit</button> </h4>
		</div>
	</div>
</template>

<script>
export default {
	name: 'CastNode',
	data: () => ({
		editorShow: false,
		currentText: "",
		originalText: "",
	}),
	props: {
		item: Object,
		editorShow: Boolean,
		create: Boolean,
	},
	mounted: function() {
		if (this.create){
			this.currentText = "";
			this.originalText = "";
			this.editorShow = true;
		}
		else {
			this.currentText = this.item.node.nadpis;
			this.originalText = this.item.node.nadpis;
		}
		//this.getText();
	},
	methods: {
		updateText: function() {
			console.log("Saving text");
			console.log(this.currentText);
			// FIXME really save!
			this.editorShow = false;
		}
	}, 
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>