q-table's expan drow collapse or uncollapse simultaneously(Solved)

[guying]

here is my html

<q-table
        color="primary"
        flat
        bordered
        separator="cell"
        :data="data"
        :columns="columns"
        :pagination.sync="pagination"
      >

        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td key="result" :props="props">{{ props.row.result }}</q-td>
            <q-td key="test_name" :props="props">{{ props.row.test_name }}</q-td>
            <q-td key="failed_info" class="col-overflow">
              <q-btn
                dense
                round
                flat
                :icon="props.expand ? 'arrow_drop_up' : 'arrow_drop_down'"
                @click="props.expand = !props.expand"
              />
              {{props.row.failed_info}}
              </a>
            </q-td>
            <q-td key="time_cost" :props="props">{{ props.row.time_cost }}</q-td>
            <q-td key="timeout" :props="props">{{ props.row.timeout }}</q-td>
            <q-td key="owner" :props="props">{{ props.row.owner }}</q-td>
            <q-td key="description" :props="props">{{ props.row.description }}</q-td>
          </q-tr>
          <q-tr v-show="props.expand" :props="props">
            <q-td            
              colspan="100%"
              style="white-space:pre-wrap; word-wrap:break-word"
            >
              <div class="text-left">{{ props.row.failed_info }}</div>
            </q-td>
          </q-tr>
        </template>

      </q-table>

[guying]

If I click button for “aaaa”, then button of “bar” collapses or uncollapses at the same time.

No idea what happened

[metalsadman]

@guying you didnt set your qtable’s row-key prop. https://quasar.dev/vue-components/table#Expanding-rows

[guying]

@metalsadman great thanks, it worked!!

[alej09424]

@guying
The same thing happens to me and the row-key property is set some other suggestion