título editado
Link
Felipe Duarte
  • 6,3mil
  • 2
  • 20
  • 46

Menu dropdown com v-if vuejs

Fonte Link
Felipe Duarte
  • 6,3mil
  • 2
  • 20
  • 46

Menu dropdown com v-if

Como é possível adicionar um efeito dropdown a esse menu na vertical, de modo que ao colocar o mouse em cima ele abra a ul filha caso ela exista.

Pensei em fazer em fazer com v-if ao clicar na li pai, mas não sei como fazer isso sem instanciar um object data para cada seção... há uma alternativa mais adequada? segue o código.

    new Vue({
        el : '#app',
      data : {
        modal : {
            estilos : {
            filhos : {
                padding : {
                    metodo : 'outer'
              },
              margin : {
                metodo : 'outer'
              }
            }
          },
          containeres : {
            filhos : {
                div : {
                filhos : {
                    example : {
                    metodo : 'outer'
                  }
                }
              },
              header : {
                metodo : 'outer'
              }
            }    
          }
        }
      },
      methods : {
        teste (item) {
            if(this[item]) this[item]();
          else console.warn('metodo inexistente')
        },
        outer () {
            alert('outer');
        }
      }
    })
<script src="https://unpkg.com/vue@2.5.9/dist/vue.js"></script>
    <div id="app">
      <ul v-for="(item, key) in modal">
        <li>
          {{key}}
        </li>
        <ul  v-for="(item2, key2) in item.filhos">
           <li @click="teste(item2.metodo)">
             {{key2}}
           </li>
             <ul v-for="(item3, key3) in item2.filhos">
                 <li @click="teste(item3.metodo)">
                   {{key3}}
                 </li>
              </ul>
        </ul>
      </ul>
    </div>