4

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": Ejemplo del resultado sin la etiqueta <code>v-for="departamento in departamentos"</code>

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...

4
  • 1
    Vos lo que queres es que se abra automaticamente el dropdown? si no es asi, podrias mostrar un ejemplo mas claro. Y aparte de eso, sabias que hay un componente bootstrap-vue que te ahorra todo ese trabajo manual?
    – gbianchi
    Commented el 12 ago. 2019 a las 14:34
  • Ya fue actualizada la pregunta agregando el resultado al final, para más detalles de lo que se quiere lograr. El proyecto ya esta construido con webpack de laravel, usando bootstrap y vue de la forma tradicional no puedo cambiar el modelo de trabajo utilizando bootstrap-vue, aún así gracias por tu comentario.
    – JaredDmz
    Commented el 12 ago. 2019 a las 14:44
  • 1
    Quieres algo así: jsfiddle.net/v5aj9kbL/2 ? Commented el 12 ago. 2019 a las 15:13
  • Es correcto bro, el problema ya fue resuelto, me dejas buena referencia, gracias por contribuir...
    – JaredDmz
    Commented el 12 ago. 2019 a las 15:15

1 respuesta 1

3

Les dejo la forma en que resolví el problema y algunos puntos a considerar en este tipo de proyectos:

  1. Tratar de evitar utilizar JQuery desde Vue.
  2. Resolver este tipo de problemas con stilos de complemento a Bootstrap.

El template queda de la forma:

<template>
    <li>
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Departamentos <b class="caret"></b></a>
        <ul class="dropdown-menu multi-level">
            <li v-for="departamento in departamentos" class="dropdown-submenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{departamento.nombre}}</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Action 1</a></li>
                    <li><a href="#">Action 2</a></li>
                    <li><a href="#">Action 3</a></li>
                </ul>
            </li>
        </ul>
    </li>
</template>

Y el nuevo estilo que complementa a bootstrap queda de la siguiente manera:

<style>
    .dropdown-submenu {
        position: relative;
    }

    .dropdown-submenu>.dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px;
        border-radius: 0 6px 6px 6px;
    }

    .dropdown-submenu:hover>.dropdown-menu {
        display: block;
    }

    .dropdown-submenu>a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #ccc;
        margin-top: 5px;
        margin-right: -10px;
    }

    .dropdown-submenu:hover>a:after {
        border-left-color: #fff;
    }

    .dropdown-submenu.pull-left {
        float: none;
    }

    .dropdown-submenu.pull-left>.dropdown-menu {
        left: -100%;
        margin-left: 10px;
        -webkit-border-radius: 6px 0 6px 6px;
        -moz-border-radius: 6px 0 6px 6px;
        border-radius: 6px 0 6px 6px;
    }
</style>

El código se obtuvo de la fuente a continuación: gracias la contribución de Ajay Patel en Codepen.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.