У меня есть этот метод (ниже), который отлично работает, когда меня направляют из <router-link>.
selectedSpaceObj() {
if (!this.selectedSpace) {
return {};
} else {
return this.spaces.filter(aSpace => aSpace.id === this.selectedSpace);
}
}
Однако при обновлении страницы или переходе по ссылке напрямую это не работает. Я могу подтвердить, что this.selectedSpace имеет значение даже после обновления. Если я перенаправлен на эту страницу с параметром 1 и URL-адресом myspaces/1, я сохраню это значение в selectedSpace, однако при обновлении я получаю пустой массив (или какой-то странный массив). Но так не должно быть? Кто-нибудь знает, как исправить эту ошибку?
Вот остаток моего кода:
rout.js содержит эти два пути:
{
path: '/myspaces',
name: 'myspaces',
component: MySpaces
},
{
path: '/myspaces/:spaceID',
name: 'returnToSpaces',
component: MySpaces,
props: true
}
Идея заключается в том, что я передаю spaceID через <router-link> с одной страницы на другую. Это работает. 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 правильно с пробелом. Однако если я наберу 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>