mamweb/vue_frontend/src/App.vue

<template>
	<div id="app">
		<div id="loading" v-if="loading">
		Loading...
		</div>
		<!--pre>
		{{item}}
		</pre-->
		<TreeNode :item="item"/>
	</div>
</template>

<script>
import TreeNode from './components/TreeNode.vue'
import axios from 'axios'
export default {
	name: 'App',
	components: {
		TreeNode,
	},
	data: () => ({
		loading: true,
		item: null
	}),
	mounted: function() {
		this.getArticles();
		this.$root.$on('updateData',(arg) => {
			console.log(arg);
			this.getArticles();
		});
	},
	methods: {
		getArticles: function() {
			this.loading = true;
			axios.get('/treenode/1/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>
#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #2c3e50;
	margin-top: 60px;
}
</style>