mamweb/vue_frontend/src/App.vue

<template>
	<div v-if="loading">
	Loading...
	</div>
	<div v-else id="app">
		<!--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();
	},
	methods: {
		getArticles: function() {
		this.loading = true;
		axios.get('/treenode/1/json/')
		.then((response) => {
			this.item = response.data;
			this.loading = false;
		})
		.catch((err) => {
			this.loading = false;
			console.log(err);
			})
		}
	}
}
</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>