Vue 2 : Cannot read property id of null - vue.js

Question

I'm having a list of orders, where each of them is clickable to view the orderdetails.
I have used hours of debugging to try understanding why the id property is null at the landing page, but looks fine through the store, and api call functions.
The best way to describe this is through code, so take a look (See the comments where the ID still has a valid value).
-> WORKING ROUTE
{ path: '/vieworder/:id', component: ViewOrder, props: true },
-> ROUTE PUSH TO DETAILS PAGE :
methods: {
...mapActions(['getOrders']),
init() {
this.getOrders()
},
viewOrder: function(order){
this.$router.push('/vieworder/' + order.id)
}
},
-> VIEWORDER.VUE (ID IS NULL IN TEMPLATE..)
import * as types from '../store/mutationtypes'
import { mapGetters, mapActions } from 'vuex'
export default {
name: 'ViewOrder',
props: {
id: {
type: String,
required: true
}
},
created() {
this.$store.dispatch('getOrderById', {
id: this.id
})
console.log('The id is now : ' + this.id)
},
computed: {
...mapGetters(["order"])
}
}
<template>
<div class="col-sm-10 col-sm-offset-1">
<h4>{{ order.id }}</h4>
</div>
</template>
--> STORE AND GETORDERBYID (ID VALUE IS CORRECT HERE...)
export default new Vuex.Store({
state: {
orders: [],
order: null
},
getters: {
orders: state => state.orders,
order: state => state.order
},
actions: {
getOrders({ commit }) {
api.getOrders().then(orders => commit(types.UPDATE_ORDERS, orders))
},
getOrderById({ commit }, { id }){
console.log("In Store now - Do we have an id ? : " + id)
api.getOrderById(id).then(order => commit(types.UPDATE_ORDER, order))
},
etc.etc.etc...
--> API CALL RETURNING DATA
getOrderById(orderId){
return axios.get('http://localhost:3000/Orders/' + orderId)
.then(response => response.data)
},
--> EXAMPLE DATA RETURNED FROM API CALL
"Orders": [
{
"id": 123456,
"PaidDate": "2017-01-12",
"AppId": "KLM-UXI-NIX-FIX",
"TicketType": "Barn - Enkeltbillett",
"TicketCount": 1,
"OrderSum": "17",
"MediaChannel": "Android",
"StatusCode": "08-12-34-56-78",
"PaymentOption": "VISA"
},
--> ERROR

Answer 1

This isn't an answer to OP's specific situation, but to the title of the question. I had the same console error message from vuejs "Cannot read property id of null" or "Cannot read property id of undefined".
I eventually solved it by going through all my code and making sure every usage of "x.id" is inside a block like "if (x)". For example, if "x" is set in "props" of the vue component, it looks like the following can fail with "Cannot read property id of undefined":
<div v-for="y in x" :key="y.id">
{{ y.name }}
</div>
The solution was to wrap it in a v-if block like this:
<div v-if="x">
<div v-for="y in x" :key="y.id">
{{ y.name }}
</div>
</div>
Similarly, in a computed property, it looks like the following can fail:
computed: {
sumids: function () {
var finalsum = 0
for (var y of this.x) {
finalsum += y.id
}
return finalsum
}
},
The solution was to wrap it in an if block like this:
computed: {
sumids: function () {
var finalsum = 0
if (this.x) {
for (var y of this.x) {
finalsum += y.id
}
}
return finalsum
}
},

Answer 2

You can try to change getOrderById({ commit }, { id }) to getOrderById({ commit }, id) in vuex and call it as this.$store.dispatch('getOrderById', id) in mounted() hook, if the order is empty.
Also you can check if the order exists like this <div class="col-sm-10 col-sm-offset-1" v-if="order.id"> to avoid errors before data is fetched.