Menú

Menú dinámico desde un JSON para pintarlo en un componente con la tecnología de Vue Js

by Luiz Vargas

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<!-- the demo root element -->
<div id="app-7">
  <ul>
   <todo-item 
      v-for="item in response"
      :menu="item"
      v-bind:key="item.padre">
      </todo-item>
  </ul>
</div>

CSS

body {
  font-family: Menlo, Consolas, monospace;
  color: #444;
}
.item {
  cursor: pointer;
}
.bold {
  font-weight: bold;
}
ul {
  padding-left: 1em;
  line-height: 1.5em;
  list-style-type: dot;
}

JavaScript

Vue.component('todo-item', {
props: {
    menu: [Object, Array]
  },
  template: 
  '<li>{{ menu.padre }}'+
   '<ul>'+
  		'<todo-item '+
      'v-for="items in menu.hijo"'+
      'v-bind:menu="items"'+
      'v-bind:key="items.padre">'+
      '</todo-item>'+
  '</ul> </li>'
})
new Vue({
  el: '#app-7',
  data: {
    response: [
      { padre: 'Padre 1', 
      hijo:[
        {padre:'Hijo de Padre 1.1', 
        	hijo:[{padre:'Hijo de padre 1.1.1', 	hijo:[{padre:'Hijo de padre 1.1.2'}]}]
      }
      ]
      },
      { padre: 'Padre 2', hijo:[{padre:'Hijo de Padre 2.1'}]},
      { padre: 'Padre 3'} ]
  }, 
  methods:{
  	
    isFolder: function () {
      return this.item.hijo && this.item.hijo.length
    
  }
  }
})