使用 vue-router 时数组过滤器在页面刷新时不起作用

Question

我有这个方法（如下），当我从<router-link> 指示时，它非常有效。

selectedSpaceObj() {
                if (!this.selectedSpace) {
                    return {};
                } else {
                    return this.spaces.filter(aSpace => aSpace.id === this.selectedSpace);
                }
            }

但是在刷新页面或直接转到链接时它不起作用。我可以确认 this.selectedSpace 即使在刷新后也有一个值。如果我以 1 的参数被路由到此页面，并且具有 url myspaces/1，我将这个值存储在 selectedSpace 中，但是在刷新时我得到一个空数组（或某种奇怪的数组）。但它不应该吗？有谁知道如何解决这个错误？

这是我的其余代码： routes.js 包含这两个路径：

{
    path: '/myspaces',
    name: 'myspaces',
    component: MySpaces
},

{
    path: '/myspaces/:spaceID',
    name: 'returnToSpaces',
    component: MySpaces,
    props: true
}

其背后的概念是我通过<router-link> 将spaceID 从一页传递到另一页。这行得通。 spaceID 正确传递。

Room.vue - 有一个到 MySpaces.vue 的路由器链接

    <router-link :to="{ name: 'returnToSpaces', params: { spaceID: spaceID } }">
        <v-btn>
            <h3> go back </h3>
        </v-btn>
    </router-link>

当我在room.vue 上并单击按钮时，它会将我重定向到myspaces.vue 作为链接myspaces/1 正确的空间ID。但是，如果我手动键入 myspaces/1 而不是被重定向，则它不起作用。它给了我错误：Cannot read property 'rooms' of undefined。这个道具链接到 spaceID，所以当我刷新它时，它很可能没有将 /1 链接到 spaceID 参数？

myspaces.vue

<template>
    <v-container>

                    <v-layout>
                        <!-- My spaces -->
                        <v-flex md8 xs12>
                            <v-layout row wrap>
                                <!-- The rooms, allRoomsObj returns all rooms in the space with the id of selectedSpace. -->

                                <v-flex v-for="room in allRoomsObj"
                                        :key="room.id"
                                        xs12
                                        sm6
                                        md6
                                        lg6
                                        :class="{'roomDesktop': !$vuetify.breakpoint.xs, 'roomMobile': $vuetify.breakpoint.xs}"
                                >
                                    <!-- A room -->
                                    <v-card class="card-round">
                                        <!-- Image -->
                                        <v-carousel :cycle="false" hide-delimiters :hide-controls="room.images.length <= 1">
                                            <!--:hide-controls="images.length <= 1"-->
                                            <v-carousel-item v-for="image in room.images" :src="image.src" :key="image.id"></v-carousel-item>
                                        </v-carousel>
                                        <!-- Information -->
                                        <v-card-text primary-title>
                                            <v-layout>
                                                <v-flex xs11>
                                                    <!-- MISSING INFORMATION IN STORE -->
                                                    <h4 class="roomType"> <router-link :to="{ name: 'room', params: { spaceID: selectedSpaceObj[0].id, roomID: room.id  } }">{{ room.type }}</router-link> </h4>
                                                    <h2> {{ room.name }} </h2>
                                                </v-flex>
                                                <v-flex xs1 hidden-sm-and-down>
                                                    <v-btn @click="selectedRoom = room.id"
                                                           :flat="selectedRoom !== room.id"
                                                           :outline="selectedRoom !== room.id"
                                                           fab
                                                           class="selectRoomBtn"
                                                           depressed
                                                    >
                                                    </v-btn>
                                                </v-flex>
                                            </v-layout>
                                        </v-card-text>
                                    </v-card>
                                </v-flex>
                            </v-layout>
                        </v-flex>

                        <!-- Sidebar -->
                        <v-flex hidden-sm-and-down sm4 lg4 class="sidebarSticky">
                            <v-layout row wrap>
                                <!--1 room details, selectedRoomObj returns 1 room with id of selectedRoom, that is in the space with id selectedSpace.-->
                                <v-flex v-for="room in selectedRoomObj" :key="room.id">
                                    <v-card class="card-round">
                                        <!-- Show only 1 image -->
                                        <v-card-media v-for="image in room.images.slice(0,1)" :src="image.src" height="200px" :key="image.id">
                                        </v-card-media>

                                        <v-card-text>
                                            <!-- Side bar - room name -->
                                            <h2 class="sidebarRoomName"> {{ room.name }} </h2>
                                            <!-- description -->
                                            <p> {{ room.description }} </p>
                                            <!-- overview button-->
                                            <p> <router-link :to="{ name: 'room', params: { spaceID: selectedSpace, roomID: selectedRoom } }">room overview..</router-link></p>

                                            <!-- styles/pins/moodboard -->

                                        </v-card-text>
                                    </v-card>
                                </v-flex>
                            </v-layout>
                        </v-flex>

                    </v-layout>

                </v-container> <!-- End of MAIN CONTENT-->
</template>

<script>
    import { mapState } from 'vuex';

    export default {
        name: "myspaces",
        props: [
          'spaceID'
        ],
        data() {
            return {
                filterMaxLength: 3,
                selectedSpace: 0,
                selectedRoom: 0
            }
        },
        created() {
            // Default selected space (first in json)
            this.selectedSpace = this.spaces[0].id;
            // console.log("spaces " + this.spaces[0].id)

            if (this.spaceID != null) {
                this.selectedSpace = this.spaceID;
            }

            // Default selected room (first in json)
            this.selectedRoom = this.spaces[0].rooms[0].id;

            // If spaceID is received, change the room to the first room in that space.
            if (this.spaceID != null) {
                var backToSpace = this.spaces.filter(aSpace => aSpace.id == this.spaceID)
                this.selectedRoom = backToSpace[0].rooms[0].id
            }

        },
        computed: {
            // Get 'spaces' from store.
            ...mapState([
                'spaces'
            ]),
            // Grab all the rooms in the selected space.
            allRoomsObj() {
                if (!this.selectedSpaceObj) {
                    return {};
                } else {
                    return this.selectedSpaceObj[0].rooms;
                }
            },
            // Grab the space that with the id that equals to the selectedSpace.
            selectedSpaceObj() {
                if (!this.selectedSpace) {
                    return {};
                } else {
                    return this.spaces.filter(aSpace => aSpace.id === this.selectedSpace);
                }
            },
            // Grab the room in the selected space, with the room id that equals to selectedRoom.
            selectedRoomObj() {
                if (!this.selectedSpaceObj) {
                    return {};
                } else {
                    return this.selectedSpaceObj[0].rooms.filter(aRoom => aRoom.id === this.selectedRoom);
                }
            }
        }
}
</script>

Answer 1

我认为问题可能出在此代码中的类型严格比较 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators) - “puelo”

改变这个：

this.spaces.filter(aSpace => aSpace.id === this.selectedSpace)

到

this.spaces.filter(aSpace => aSpace.id == this.selectedSpace)