Vue - Simple Tree Component

by Ben Clayton

HTML

<script src="https://unpkg.com/vue"></script>
<div id="hotdirectory">
  <vue-folder :files="data"></vue-folder>
</div>

JavaScript

Vue.component('vue-folder', {
  props: ["files"],
  template: '<ul><li v-for="file in files">{{ file.name  }} {{ file.date}}' +
						'<vue-folder :files="file.children"></vue-folder>' +
						'</li></ul>'
})

var vm1 = new Vue({
  el: '#hotdirectory',
  data: {data: [
   	{"name":"colours", "children":[{"name":"red","date":"1/2/2019"},{"name":"green"},{"name":"blue"}] },
		{"name":"pages", "children":[{"name":"home"},{"name":"contact"},{"name":"products","children":[{"name":"car"},{"name":"bike"},{"name":"plane"}]}] }
  ]}
});