@
@
@zcreat2017-10-17 05:43:05
Vue.js
@zcreat, 2017-10-17 05:43:05

How to add popup blocks to list items?

I want to display a popup block (div) on click in the list using vue.

There is a simple list ul>li *3
One Two Three

If we click on One isShow div1, if we click Two, then block 2 is displayed.
Now I have a problem that when I click, all three blocks are hidden or shown at the same time.

The code is now like this, by default everything is hidden:

<ul class="list">
  <li><div v-on:click="isShow = !isShow">Один</div><div v-show="isShow" class="block"> 1 block/div></li>
  <li><div v-on:click="isShow = !isShow">Два</div><div v-show="isShow" class="block"> 2 block </div></li>
  <li><div v-on:click="isShow = !isShow">Три</div><div v-show="isShow" class="block"> 3 block</div></li>
</ul>

new Vue({
    el: '#app',
    data: {
      isShow: false
    }
  })

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
Sergey delphinpro, 2017-10-17
_

Addition to answer 0xD34F :
Dependent switching https://jsfiddle.net/ygbs1w79/1/

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question