Change vue's expansion panel expanded text - vuetify.js

Question

How can i toggle the text displayed when a user toggles the expanded state of an expansion panel? I thought this would work but the 'open' value doesn't appear to trigger correctly.
<!-- Details -->
<v-expansion-panels flat hover>
<v-expansion-panel>
<v-expansion-panel-header disable-icon-rotate>
{{ title }}
<template v-slot:actions>
<span v-if="open" class="overline text--disabled">Show Details</span>
<span v-else class="overline text--disabled">Hide Details</span>
</template>
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-row>
<v-col cols="4">somos</v-col>
<v-col cols="4">somos</v-col>
<v-col cols="4">somos</v-col>
</v-row>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>

Answer 1

I don't know if you are using vuetify v2, but I guess it.
So to get the "open" value, you must to use the default slot:
<v-expansion-panel>
<!-- add expand-icon="" to remove the arrow icon -->
<v-expansion-panel-header disable-icon-rotate expand-icon="">
<template v-slot:default="{ open }">
<v-row no-gutters>
<v-col cols="4">{{ title }}</v-col>
<v-col cols="4"></v-col>
<v-col cols="4">
<span v-if="!open" key="0" class="overline text--disabled">Show Details</span>
<span v-else key="1" class="overline text--disabled">Hide Details</span>
</v-col>
</v-row>
</template>
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-row>
<v-col cols="4">somos</v-col>
<v-col cols="4">somos</v-col>
<v-col cols="4">somos</v-col>
</v-row>
</v-expansion-panel-content>
</v-expansion-panel>
You can use the header as you consider, I mean, without v-row or v-col:
<v-expansion-panel-header disable-icon-rotate v-slot="{ open }" expand-icon="">
<v-layout align-center justify-space-between/>
title
<span v-if="open" key="0" class="overline text--disabled">Show Details</span>
<span v-else key="1" class="overline text--disabled">Hide Details</span>
</v-layout>
</v-expansion-panel-header>