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 <script>9 // Define el componente10 Vue.component('file-folder', {11 props: ['data'],12 template: `13 <li>14 {{ data.name }}15 <ul v-if="data.children">16 <file-folder v-for="child in data.children" :data="child" :key="child.name"></file-folder>17 </ul>18 </li>19 `20 }21 22 });23 24 // Crea la instancia de Vue25 new Vue({26 el: '#app',27 data: {28 fileSystem: {29 name: 'root',30 children: [31 {32 name: 'folder1',33 children: [34 { name: 'file1.txt' },35 { name: 'file2.txt' }36 ]37 },38 {39 name: 'folder2',40 children: [41 { name: 'file3.txt' },42 { name: 'file4.txt' }43 ]44 },45 { name: 'file5.txt' }46 ]47 }48 }49 });50 </script>51 Enlace
El enlace para compartir es: