El código para el dropdown multinivel ya esta completo, el problema está al quererlo llenar por medio de v-for
con Vue, un detalle importante podría estar al no encontrar una etiqueta que contenga a las etiquetas <a></a>
y <ul></ul>
, lo que busco es desplegar ese multinivel de la forma v-for="departamento in departamentos"
a continuación muestro el código del componente Vue:
<template>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Departamentos <span class="caret"></span></a>
<ul class="dropdown-menu">
<li v-for="departamento in departamentos" class="dropdown-submenu">
<a class="desplegar" tabindex="-1" href="#">1er nivel <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2do nivel</a></li>
<li><a tabindex="-1" href="#">2do nivel</a></li>
</ul>
</li>
</ul>
</li>
</template>
<script>
export default {
data: function() {
return {
departamentos:[],
}
},
mounted: function() {
this.show()
},
methods: {
show: function() {
let self = this
axios.get('/departamentos').then(function(response){
self.departamentos = response.data
})
},
}
};
Uso de JQuery para desplegar el multinivel:
$(document).ready(function(){
$('.dropdown-submenu a.desplegar').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
Código para agregar el estilo al multinivel:
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
</style>
Ejemplo del resultado sin la etiqueta v-for="departamento in departamentos"
:
Cuando se agrega v-for="departamento in departamentos"
se muestra el primer nivel y al dar clic el dropdown se oculta...
Todo el código mostrado en bloques pertenece al mismo archivo. De antemano gracias...