Vue доступ к массиву в массиве

Question

Я хочу получить доступ к данным из подпорки, у которой есть массив внутри массива, мне нужно набрать тонны операторов v-for для доступа к данным.

В настоящее время я должен циклически перемещаться по массиву spaces (проверьте, совпадает ли их идентификатор с тем, который я хочу) и использовать оператор v-if для вывода только того, что я хочу, затем я повторяю этот цикл для rooms (проверьте идентификаторы снова).

Есть ли способ filter через массивы внутри массивов? Без этих утверждений for / if? Я читал в фильтрах, но не смог понять, что мне нужно.

Файл Vue:

               <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>

Мои данные:

    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'
                        }
                    ]
                }
            ]
        })
    })

Код выше может показаться очень простым, но я работаю с гораздо большим количеством данных, и с ним может быть очень сложно работать.

Answer 1

Ах, да, не делай этого с v-for. Создайте себе некоторые вычисляемые свойства и используйте Array.filter(), затем в своем шаблоне укажите вычисленное свойство.

computed: {
    selectedSpaceObj() {
        return this.spaces.filter(aSpace => aSpace.id === this.selectedSpace)
    },
    selectedRoomObj() {
        return this.selectedSpaceObj.rooms
            .filter(aRoom => aRoom.id === this.selectedRoom)                
    }
}

Сделайте все это в JavaScript. Это приведет к гораздо более читаемому коду, и вы, вероятно, будете использовать вычисленное свойство повсеместно. Например, для selectedRoomObj мы можем просто повторно использовать вычисленное selectedSpaceObj.

Далее, для читабельности кода и во избежание длинных методов доступа, создайте себе пространство и компоненты комнаты. Вложенные циклы v-for - верный признак того, что они вам нужны.

Проблемы, с которыми вы сталкиваетесь, могут привести к переосмыслению структуры ваших данных. Возможно, вы хотите хранить выделенные объекты как непосредственно на комнатных, так и на космических объектах? Возможно, имеет смысл иметь 1 массив комнат корневого уровня с "внешним ключом" в пробелах?