Как сделать чтобы открывался только один столбец, а не два сразу?

Question

[Игорь]

<script type="text/x-template" id="app-template">
  <v-app>
    <v-item-group selected-class="bg-primary">
      <v-container>
        <v-row>
      <v-col cols="12">
        <v-sheet>
          <v-row>
            <v-col
              v-for="test in tests"
              :key="test"
            >
              <v-sheet                
                elevation="5" 
                rounded
                class="d-flex flex-column align-center justify-center pa-5"
                >
                <span class="text-h3">{{test.name}}</span> 
                
                <v-btn
                  @click="show = !show"
                  color="primary"
                  size="small"
                >
                  {{this.show === false ? 'Open' : 'Close'}}
                </v-btn>
                <div v-if="show" >
                  {{test.numberTest.toString(test.numberTest)}}
                </div>
              </v-sheet>
            </v-col>
          </v-row> 
        </v-sheet>
      </v-col>
    </v-row>
      </v-container>
    </v-item-group>
  </v-app>
</script>
<div id="app"></div>
const { createApp } = Vue
const { createVuetify } = Vuetify

const vuetify = createVuetify()

const app = createApp({
  template: '#app-template',
  data: () => ({
              show: false,
              tests:[
                {
                  name: 'test',
                  numberTest:[
                    '4124124124',
                    '4124124124',
                    '41241242112',
                    '12412532535'
                  ]
                },
                {
                  name: 'test',
                  numberTest: [
                    "213121212",
                    '213123123123',
                    '14124124124',
                    '421412412412'
                  ]
                },
                ]
  }),
}).use(vuetify).mount('#app')

Answer 1

[0xD34F]

Пусть у каждого элемента массива tests будет собственное свойство show, а не одно на всех. Заменяете:

@click="show = !show" ---> @click="test.show = !test.show"

{{this.show === false ? 'Open' : 'Close'}} ---> {{ test.show ? 'Close' : 'Open' }}

<div v-if="show" > ---> <div v-if="test.show">

Это в случае, когда скрытый контент должен показываться независимо в каждом столбце.

Если же показывать надо не более одного (при клике на другой текущий открытый закрывается), тогда show должен быть индексом соответствующего элемента данных или ссылкой на него, например:

@click="show = !show" ---> @click="show = show === test ? null : test"

{{this.show === false ? 'Open' : 'Close'}} ---> {{ show === test ? 'Close' : 'Open' }}

<div v-if="show" > ---> <div v-if="show === test">