Vue 访问数组中的数组

Question

我想从一个数组中包含一个数组的道具访问数据，我必须输入大量 v-for 语句才能访问数据。

目前我必须循环遍历 spaces 数组（检查它们的 id 是否与我想要的匹配）并使用 v-if 语句只输出我想要的那个，然后我对 rooms 重复该循环（再次检查 ID）。

有没有办法通过数组中的数组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 个根级别的房间数组更有意义，用“外键”进入空间？