Question

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

目前，我必须循环遍历spaces数组（检查其ID是否与我想要的ID匹配），并使用v-if语句仅输出所需的ID，然后重复该循环为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个根级别的房间阵列并在空间中插入“外键”更有意义？

Vue访问数组中的数组

1 个答案: