Dropdown menu with v-if vuejs

Question

Dropdown menu with v-if vuejs

Navigation

#1 by (0 votes)

1

How can you add a dropdown effect to this menu vertically, so by placing the mouse on it it opens the ul daughter if it exists.

I thought of doing with v-if when I clicked on li parent, but I do not know how to do this without instantiating a object data for each section ... is there a more suitable alternative? follow 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><divid="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

asked by anonymous 12.12.2017 / 13:35

1 answer

Linux is not writing txt Consumption webservice with error: unsupported content type

score 0 · Accepted Answer

I made the following way, each menu item will have a ativo object, which will toggle between mouseout and 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><divid="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 most interesting thing is that with v-if the rendering will sound better, because this menu will contain thousands of items, ie, only when you hover the mouse over it, the item will be rendered when it is removed, unnecessary ...