When working with a prop that contains an array within an array, I find myself having to iterate through multiple v-for statements in order to access the desired data.
Currently, my process involves cycling through the spaces array to match the ids and then using conditional v-if statements to output the specific data. The same process is repeated for the rooms array.
Is there a more efficient way to filter through arrays within arrays without relying on nested for/if statements? I have attempted to explore filters as a solution but haven't found a suitable implementation for my requirements.
Vue file:
<v-flex hidden-sm-and-down sm4 lg4 class="sidebarSticky">
<v-layout v-for="space in spaces"
v-if="space.id === selectedSpace"
:key="space.id"
>
<!-- 1 room details -->
<v-flex v-for="room in space.rooms"
v-if="selectedRoom === room.id"
v-if="selectedRoom "
:key="room.id">
<v-card>
<v-card-text>
<!-- room name -->
<h2 class="sidebarRoomName"> {{ room.name }} </h2>
<!-- description -->
<p> {{ room.description }} </p>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-flex>
My Data:
new Vue({
el: '#app',
data: () => ({
selectedSpace: 0;
selectedRoom: 1,
spaces: [
{
id: 0,
name: 'House in Amsterdam',
rooms: [
{
id: 0,
name: 'My epic living room'
},
{
id: 1,
name: 'My epic room'
}
]
},
{
id: 5,
name: 'House in Paris',
rooms: [
{
id: 0,
name: 'My epic bathroom'
}
]
}
]
})
})
The code snippet provided may appear straightforward, but managing larger datasets can pose significant challenges.