Как добавить выплывающие блоки элементам списка?

Question

[zcreat]

Хочу отображать выплывающий блок (div) по клику в списке с помощью vue.

Имеется простой список ul>li *3
Один Два Три

Если нажимаем на Один isShow div1, если нажимаем Два, то отображается блок 2.
сейчас у меня проблема в том, что при нажатии скрываются или отображаются все три блока одновременно.

Код сейчас такой, по умолчанию все скрыты:

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

[Сергей delphinpro]

Дополнение к ответу 0xD34F :
Зависимое переключение https://jsfiddle.net/ygbs1w79/1/

Comments

[zcreat]

А как добавить, если второй раз нажимаешь то блок скрывается.

Answer 2

[0xD34F]

У каждого блока должен быть свой isShow. Массив, описывающий блоки, кладёте в data, обрабатываете его с помощью v-for. Типа так.

Comments

[zcreat]

Понял, а как скрывать Один если нажали после Два. ?

[0xD34F]

zcreat, так?

[zcreat]

0xD34F, Да !! Благодарю !

[zwezew]

0xD34F, если не трудно. можете расписать принцип работы?

[0xD34F]

zwezew, что конкретно вам неясно?

[zwezew]

0xD34F,
не очень ясно, как срабатывает эта строка
active = index === active ? null : index

и как именно получает индекс

[0xD34F]

zwezew, индекс активного блока устанавливается в зависимости от равенства его текущего значения индексу кликнутого блока - если равны, то null (если кликнули на открытый блок, он должен закрыться), иначе берётся индекс кликнутого блока (клик на закрытый блок открывает его).

То же самое, но без тернарного оператора, может так понятнее будет:

if (active === index) {
  active = null
} else {
  active = index
}

"Как получает индекс" - откройте документацию vue , почитайте про v-for.

[zwezew]

0xD34F, спасибо