title: Vue 2 : Cannot read property id of null
body: <p>I'm having a list of orders, where each of them is clickable to view the orderdetails. </p>
  
  <p>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. </p>
  
  <p>The best way to describe this is through code, so take a look (See the comments where the ID still has a valid value).</p>
  
  <p><strong>-> WORKING ROUTE</strong></p>
  
  <pre><code> { path: '/vieworder/:id', component: ViewOrder, props: true },
  </code></pre>
  
  <p><strong>-> ROUTE PUSH TO DETAILS PAGE :</strong></p>
  
  <pre><code>methods: {
          ...mapActions(['getOrders']),
          init() {
              this.getOrders()
          },
          viewOrder: function(order){
              this.$router.push('/vieworder/' + order.id)
          }
      },
  </code></pre>
  
  <p><strong>-> VIEWORDER.VUE  (ID IS NULL IN TEMPLATE..)</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    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"])
          }
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;div class="col-sm-10 col-sm-offset-1"&gt;
          &lt;h4&gt;{{ order.id }}&lt;/h4&gt;
      &lt;/div&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>--> STORE AND GETORDERBYID (ID VALUE IS CORRECT HERE...)</strong></p>
  
  <pre><code>export default new Vuex.Store({ 
  state: {
      orders: [],
      order: null
  },
  getters: {
      orders: state =&gt; state.orders,
      order: state =&gt; state.order
  },
  actions: {
      getOrders({ commit }) {
          api.getOrders().then(orders =&gt; commit(types.UPDATE_ORDERS, orders))
      },
      getOrderById({ commit }, { id }){
          console.log("In Store now - Do we have an id ? : " + id)
          api.getOrderById(id).then(order =&gt; commit(types.UPDATE_ORDER, order))
      }, 
      etc.etc.etc...
  </code></pre>
  
  <p><strong>--> API CALL RETURNING DATA</strong></p>
  
  <pre><code>getOrderById(orderId){
      return axios.get('http://localhost:3000/Orders/' + orderId)
   .then(response =&gt; response.data)   
  },
  </code></pre>
  
  <p><strong>--> EXAMPLE DATA RETURNED FROM API CALL</strong></p>
  
  <pre><code>"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"
  },
  </code></pre>
  
  <p><strong>--> ERROR</strong>
  <a href="https://i.stack.imgur.com/7OsiY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7OsiY.png" alt="enter image description here"></a></p>