I have a method (shown below) that functions perfectly when I'm directed from a <router-link>.
selectedSpaceObj() {
if (!this.selectedSpace) {
return {};
} else {
return this.spaces.filter(aSpace => aSpace.id === this.selectedSpace);
}
}
However, upon refreshing the page or directly accessing the link, it stops working. Even though I can confirm that this.selectedSpace still has a value after the refresh. If I am routed to this page with a parameter of 1 and the URL is myspaces/1, I store this value in selectedSpace. However, upon refresh, I receive an empty array or some strange form of an array. This shouldn't be happening, does anyone know how to resolve this issue?
The rest of my code looks like this: routes.js contains these two paths:
{
path: '/myspaces',
name: 'myspaces',
component: MySpaces
},
{
path: '/myspaces/:spaceID',
name: 'returnToSpaces',
component: MySpaces,
props: true
}
The idea behind this setup is that I pass the spaceID via a <router-link> from one page to another, which works as expected. The spaceID gets passed correctly.
Room.vue - features a router-link to MySpaces.vue
<router-link :to="{ name: 'returnToSpaces', params: { spaceID: spaceID } }">
<v-btn>
<h3> Go Back </h3>
</v-btn>
</router-link>
When I am on the room.vue and click on the button, it redirects me to the myspaces.vue with the correct link myspaces/1 containing the spaceID. However, if I manually type myspaces/1 instead of being redirected, it fails to work and gives me the error:
Cannot read property 'rooms' of undefinedmyspaces.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>
<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>