CODEWITHSUNDEEP
vue.jsvuejs2vue-render-function
suhkha
suhkha

Reputation: 581

Hide-Show N divs with Vuejs and @click [beginner]

I am confused on how to hide and show 3 divs according to the click.

I have been able to show and hide 2 divs with v-show but v-show does not apply I think for more than 2 divs.

This is my code without vuejs, because I don't understand how to render with v-else-if

<div id="element_one">
  ONE
  <a>Go to two</a>
  <a>Go to three</a>
  Some content
</div>

<div id="element_two>
 <a>Go back to one</a>
 Some content
</div>

<div id="element_three>
  <a>Go back to one</a>
  Some content
</div>

app.js could be like this?

new Vue({
el: '#app',
data: {
  isOne: true,
  isTwo: true,
  isThree: true
 }
});

Sorry, I understand is a basic question but if you could guide me. I saw what there is about v-else-if in the documentation but it is still not clear to me how to apply it. I understand that each div applies a display none to it and when it is activated it disappears.

So basically it is, that two divs are in display none when the div that I accessed through its corresponding button is activated.

Thank you.

Upvotes: 0

Views: 187

Answers (2)

mrksbnc
mrksbnc

Reputation: 56

<div id="element_one" v-if="visibleDivId == 1">
  ONE
<a @click="showDivById(2)">Go to two</a>
<a @click="showDivById(3)>Go to three</a>
  Some content
</div>

<div id="element_two v-if="visibleDivId == 2">
  <a @click="showDivById(1)">Go back to one</a>
   Some content
</div>
<div id="element_three v-if="visibleDivId == 3">
  <a @click="showDivById(1)">Go back to one</a>
  Some content
</div>

new Vue({ 
el: '#app', 
data: {
  visibleDivId: 1,  
},
methods: {
  showDivById(divId) {
    this.visibleDivId = divId
   }
  }
});

You can write a function and use it to show or hide div on click.

Upvotes: 0

Eli Sigal
Eli Sigal

Reputation: 100

for using v if directive
<p v-if="inStock">{{product}}</p>
<p v-else-if="onSale">..</p>
<p v-else-if="onSale">..</p>
<p v-else-if="onSale">..</p>
and so on and the last is what`s below
<p v-else>..</>

you can also use v-show(note this toggles css property display:none)
<p v-show="showProductDetails">..</p>

Upvotes: 1

Related Questions