Как в Vue сделать toggle класса, но с по умолчанию раскрытыми списками?

Question

[Влад]

Привет. Вот сделал пример.
https://jsfiddle.net/tcv64y9k/
Не пойму как сделать чтобы списки по умолчанию были раскрыты, а по клику уже скрывались.

Answer 1

[0xD34F]

Складываете данные блоков в массив, каждому элементу массива добавляете свойство, которое будет отвечать за показ контента:

data: () => ({
  items: [
    { show: true, ... },
    { show: true, ... },
    ...
  ],
}),

<template v-for="(n, i) in items">
  <button @click="n.show = !n.show">{{ n.show ? 'hide' : 'open' }}</button>
  <div class="list" v-show="n.show">
    ...
  </div>
  <hr v-if="i !== items.length - 1">
</template>

https://jsfiddle.net/ra5byco9/

UPD. Вынесено из комментариев:

С v-for я знаю как, а без него никак?

Дело не в v-for, а в том, что состояние каждого скрываемого-показываемого элемента должно управляться отдельным свойством. Можно его, свойство, сделать частью компонента, отвечающего за демонстрацию пары кнопка-контент. Дальше можете создавать столько экземпляров, сколько потребуется.

Comments

[Влад]

0xD34F С v-for я знаю как, а без него никак? У меня просто два статичных списка.
На десктопе они не переключаются, а в мобиле появляются кнопки и возможность скрыть конкретный список, но чтобы изначально были раскрыты.

[0xD34F]

Дополнил ответ.

Answer 2

[Андрей]

Вы не туда смотрите и пытаетесь работать с домом ну если так то вот вам
https://jsfiddle.net/za3o5j9m/1/