我有以下方法（在下面），当我从<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，并带有一个spaceID，将我重定向到myspaces/1。但是，如果我手动输入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>
答案 0 :(得分：0)
我认为问题可能是此代码（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)