Question

我有一个订单列表，其中每个订单都可以点击以查看订单详细信息。

我已经使用了几个小时的调试来尝试理解为什么id属性在着陆页上为null，但是通过商店和api调用函数看起来很好。

描述这个的最好方法是通过代码，所以看看（请参阅ID仍然具有有效值的注释）。

- ＆GT;工作路线

 { path: '/vieworder/:id', component: ViewOrder, props: true },

- ＆GT; ROUTE PUSH TO DETAILS页面：

methods: {
        ...mapActions(['getOrders']),
        init() {
            this.getOrders()
        },
        viewOrder: function(order){
            this.$router.push('/vieworder/' + order.id)
        }
    },

- ＆GT; VIEWORDER.VUE（ID在模板中为空...）

    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>

- ＆GT;商店和GETORDERBYID（ID值在这里正确...）

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...

- ＆GT; API CALL返还数据

getOrderById(orderId){
    return axios.get('http://localhost:3000/Orders/' + orderId)
 .then(response => response.data)   
},

- ＆GT;从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"
},

- ＆GT;错误

Answer 1

如果订单为空，您可以尝试在vuex中将getOrderById({ commit }, { id })更改为getOrderById({ commit }, id)，并在this.$store.dispatch('getOrderById', id)挂钩中将其称为mounted()。

此外，您可以检查订单是否存在，如同<div class="col-sm-10 col-sm-offset-1" v-if="order.id">一样，以避免在获取数据之前出现错误。

Answer 2

这不是对OP具体情况的答案，而是对问题标题的回答。我从vuejs收到了相同的控制台错误消息“无法读取null的属性ID”或“无法读取undefined的属性ID”。

我最终通过检查所有代码并确保每次使用“ x.id”都在“ if（x）”之类的代码块中来解决了该问题。例如，如果在vue组件的“ props”中设置了“ x”，则由于“无法读取未定义的属性ID”，以下内容可能会失败：

<div v-for="y in x" :key="y.id">
  {{ y.name }}
</div>

解决方案是将其包装在v-if块中，如下所示：

<div v-if="x">
  <div v-for="y in x" :key="y.id">
    {{ y.name }}
  </div>
</div>

类似地，在计算属性中，以下内容可能会失败：

computed: {
  sumids: function () {
    var finalsum = 0
    for (var y of this.x) {
      finalsum += y.id
    }
    return finalsum
  }
},

解决方案是将其包装在if块中，如下所示：

computed: {
  sumids: function () {
    var finalsum = 0
    if (this.x) {
      for (var y of this.x) {
        finalsum += y.id
      }
    }
    return finalsum
  }
},

Vue 2：无法读取null的属性id

2 个答案: