i had a follow problem.
I need to show or hide contents using v-if, but i have my content on an array: this is my example.
<v-expansion-panel v-for="item in flightOptionData" :key="item.type" elevation="0" class="rounded-lg foExpansion">
<v-expansion-panel-title class="pa-3 bg-card" v-slot="{ open }" expand-icon="" collapse-icon="">
<section class="foCard">
<p>{{item.finalPrice}}</p>
<p>{{item.number}}</p>
<p v-if="true" class="nextDay">+1</p>
</section>
</v-expansion-panel-title>
</v-expansion-panel>
js...
data() {
return {
flightOptionData: [
{ finalPrice: '5.431,00', number: 'A12314', overnight: true }, { finalPrice: '5.431,00', number: 'A12314', overnight: false }
]}
I tried to solve at this way:
<v-expansion-panel v-for="item in flightOptionData" :key="item.type" elevation="0" class="rounded-lg foExpansion">
<v-expansion-panel-title class="pa-3 bg-card" v-slot="{ open }" expand-icon="" collapse-icon="">
<section class="foCard">
<p>{{item.finalPrice}}</p>
<p>{{item.number}}</p>
<p v-if="{{item.overnight}}" class="nextDay">+1</p>
</section>
</v-expansion-panel-title>
</v-expansion-panel>
js...
data() {
return {
flightOptionData: [
{ finalPrice: '5.431,00', number: 'A12314', overnight: true }, { finalPrice: '5.431,00', number: 'A12314', overnight: false }
]}