1 <!-- Agrega esto en tu archivo HTML -->2 <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>3 <div id="app">4 <ul>5 <file-folder :data="fileSystem"></file-folder>6 </ul>7 </div>8 9 <script>10 // Define el componente11 Vue.component('file-folder', {12 props: ['data'],13 template: `14 <li @click="handleClick">15 {{ data.name }}16 <ul v-if="data.children">17 <file-folder v-for="child in data.children" :data="child" :key="child.name"></file-folder>18 </ul>19 </li>20 `,21 methods: {22 handleClick() {23 console.log(this.data.name);24 }25 }26 });27 28 // Crea la instancia de Vue29 new Vue({30 el: '#app',31 data: {32 fileSystem: {33 name: 'root',34 children: [35 {36 name: 'folder1',37 children: [38 { name: 'file1.txt' },39 { name: 'file2.txt' }40 ]41 },42 {43 name: 'folder2',44 children: [45 { name: 'file3.txt' },46 { name: 'file4.txt' }47 ]48 },49 { name: 'file5.txt' }50 ]51 }52 }53 });54 </script>55 Enlace
El enlace para compartir es: