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
	},
	mounted: function() {
		console.log("mounted");
		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>