Hide a v-for element with v-show

Asked

Viewed 614 times

1

I need to hide an element of v-for with v-show.

I have a list that populates a menu and I need to hide a certain element, someone can give me a light?

vue.js-2

  • Show the code you already have.

  • <router-link v-for="(link,index) in sidebarLinks" :to="link.path" tag="li" :ref="link.name" :key="link.name + index"> <a> <i :class="link.icon"></i> <p>{link.name}</p> </a> </router-link>

  • Use the link edit to add information to the question.

2 answers

0

Hello, I believe it is just you add within each link Object a Boolean with the condition to display the element.

<router-link v-for="(link,index) in sidebarLinks" v-show="link.CODICAO_PARA_EXIBIR_ELEMENTO" :to="link.path" tag="li" :ref="link.name" :key="link.name + index">
    <a>
        <i :class="link.icon"></i>
        <p>{{link.name}}</p>
    </a>
</router-link>

0

Hi, unlike Angular, for example, Vue accepts two directives in the same element:

<button v-for="(letra, indice) in letras" 
    @click="inserirLetra(letra, indice)"
    v-show="botoesRemovidos.indexOf(indice) < 0">
    {{ letra }}
</button>

So it’s super simple.

This example I’m showing you, I myself used in the project anagram which is part of the book Vue: a practical approach.

I hope I’ve helped!

Browser other questions tagged vue.js-2

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