I encountered an issue with handling content visibility in my project.
I needed to toggle the visibility of content using v-if, but the content was stored in an array. Here is an example of what I had:
<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>
<script>
data() {
return {
flightOptionData: [
{ finalPrice: '5.431,00', number: 'A12314', overnight: true },
{ finalPrice: '5.431,00', number: 'A12314', overnight: false }
]
}
</script>
I attempted to address this by making the following adjustments:
<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>
<script>
data() {
return {
flightOptionData: [
{ finalPrice: '5.431,00', number: 'A12314', overnight: true },
{ finalPrice: '5.431,00', number: 'A12314', overnight: false }
]
}
</script>