mamweb/vue_frontend/src/components/TreeNodeRoot.vue

<template>
	<div id="app">
		<div id="loading" v-if="loading">
		Loading...
		</div>
		<div v-else>
		<!--pre>
		{{item}}
		</pre-->
		<button v-show="editorMode" v-on:click="editorMode = false">Vypnout editační mód</button>
		<button v-show="!editorMode" v-on:click="editorMode = true">Zapnout editační mód</button>
		<button v-show="debugMode" v-on:click="debugMode = false">Vypnout ladicí mód</button>
		<button v-show="!debugMode" v-on:click="debugMode = true">Zapnout ladicí mód</button>
		<TreeNode :item="item" :editorMode="editorMode" :debugMode="debugMode"/>
		</div>
	</div>
</template>

<script>
import TreeNode from './TreeNode.vue'
import axios from 'axios'
export default {
	name: 'App',
	components: {
		TreeNode,
	},
	data: () => ({
		loading: true,
		item: null,
		tnid: 1,
		editorMode: false,
		debugMode: false,
	}),
	props:{
		tnid: Number,
		tnsource: String,
		editorMode: Boolean,
		debugMode: Boolean,
	},
	mounted: function() {
		if (this.tnsource && this.tnsource=='inline'){
			let data = JSON.parse(document.getElementById('vuedata').textContent);
			this.tnid = data.treenode;
		}
		this.getArticles();
		this.$root.$on('updateData',(arg) => {
			console.log(arg);
			this.getArticles();
		});
	},
	methods: {
		getArticles: function() {
			this.loading = true;
			axios.get('/treenode/'+this.tnid+'/json/')
			.then((response) => {
				this.item = response.data;
				this.loading = false;
				console.log('Data updated');
				this.$root.$emit('dataUpdated',"dataUpdated");
			})
			.catch((err) => {
				this.loading = false;
				console.log(err);
				})
		}
	},
	events: {
		updateData: function(){
			this.getArticles()
		}
	}
}
</script>

<style>
@import '../../../mamweb/static/css/base.css';
@import '../../../mamweb/static/css/constants.css';
@import '../../../mamweb/static/css/layout.css';
@import '../../../mamweb/static/css/modules.css';
</style>