How to make a class toggle in Vue, but with lists expanded by default?

Question

Vue.js

Hello. Here I made an example.
https://jsfiddle.net/tcv64y9k/
I don’t understand how to make the lists open by default, and already hidden on click.

Answer 1

Add the block data into an array, add a property to each array element that will be responsible for displaying content:

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
. Taken from the comments:

With v-for, I know how, but without it, in any way?

It's not about v-for, but about the fact that the state of each hidden-showed element should be managed by a separate property. You can make it, a property, part of the component responsible for demonstrating the button-content pair. Then you can create as many instances as you need .

Answer 2

You are looking in the wrong direction and trying to work with the house, well, if so, then here you are
https://jsfiddle.net/za3o5j9m/1/