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

Question

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.

I'm not having one because, I don't know how to start, sorry :( I only assume but It's no clear to me — suhkha, May 23 '20 at 14:46
Yes, but in the examples it is very basic, like when you switch between two divs, that's why I doubt if anyone can guide me or explain what happens with v-else-if, buttons and changes between 3 divs. thank you! — suhkha, May 23 '20 at 15:54
I don't think there is v-else-if option. You can use v-if for all of the divs with appropriate conditions. — serdar, May 23 '20 at 17:00

score 1 · Answer 1 · answered May 24 '20 at 18:57

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>

Bence Markus · Answer 2 · 2021-08-24T07:31:12.087

<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.

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

2 Answers2