Dropdown menu with v-if vuejs

Asked

Viewed 254 times

1

How to add an effect dropdown to this vertical menu, so that when placing the mouse on top it opens the ul daughter if she exists.

I thought I’d do it with v-if by clicking on li Dad, but I don’t know how to do this without instantiating a object data for each section... is there a more suitable alternative? follows the code.

    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/[email protected]/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>

javascript vue.js vue.js-2
  • 1

    There are several alternatives, besides components already created, you can use the mouseover to do this by hovering the mouse.

  • Why not use an existing component?

  • In fact my application is very specific, I can not find anything done that suits the requirements :/

1 answer

0


I did as follows, each menu item will have an object ativo, which will switch between the mouseout and the mouseleave...

new Vue({
	el : '#app',
  data : {
  	modal : {
      filhos: {
      	estilos : {
          ativo: false,
          filhos : {
            padding : {
            	ativo : false,
              metodo : 'outer'
            },
            margin : {
            	ativo : false,
              metodo : 'outer'
            }
          }
        },
        containeres : {
          ativo : false,
          filhos : {
            div : {
            	ativo : false,
              filhos : {
                example : {
                	ativo : false,
                  metodo : 'outer'
                }
              }
            },
            header : {
            	ativo : false,
              metodo : 'outer'
            }
          }    
        }
      }
    }
  },
  methods : {
  	teste (item) {
    	if(this[item])
    		this[item]();
       		else console.warn('metodo inexistente')
    },
    outer () {
    	alert('outer');
    },
  }
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="app">
  <ul v-for="(item, key) in modal.filhos" @mouseover="item.ativo = true" @mouseleave="item.ativo = false">
    <li>
      {{key}}
    </li>
    <ul @mouseover="item2.ativo = true" @mouseleave="item2.ativo = false" v-for="(item2, key2) in item.filhos" v-if="item.ativo === true">
       <li @click="teste(item2.metodo)">
         {{key2}}
        </li>
         <ul @mouseover="item3.ativo = true" @mouseleave="item3.ativo = false" v-for="(item3, key3) in item2.filhos" v-if="item2.ativo === true">
            <li @click="teste(item3.metodo)">
              {{key3}}
            </li>
          </ul>
    </ul>
  </ul>
</div>

The interesting thing is that with v-if the rendering will sound better, because this menu will contain thousands of items, IE, only when hovering over, the item will be rendered when taking it will be removed, thus discarding unnecessary codes...

Browser other questions tagged javascript vue.js vue.js-2

You are not signed in. Login or sign up in order to post.