Vue.js Vue 2:无法读取null的属性id

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

我用了数小时的调试来理解为什么登录页上的id属性为null，但通过存储和api调用函数看起来很好

描述这一点的最佳方式是通过代码，因此请看一看（请参阅注释，其中ID仍然具有有效值）

->工作路线

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

->路线推送至详细信息页面：

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

->VIEWORDER.VUE（模板中的ID为空）

import*作为“../store/mutationtypes”中的类型
从“vuex”导入{MapGetter，mapActions}
导出默认值{
名称：'ViewOrder'，
道具：{
身份证：{
类型：字符串，
必填项：true
}
},
创建（）{
此.$store.dispatch（'getOrderById'{
id:这个是
})
console.log（'现在的id是：'+this.id）
},
计算：{
…映射获取程序（[“顺序”]）
}
}

{{order.id}

如果订单为空，您可以尝试将vuex中的

getOrderById（{commit}，{id}）

更改为

getOrderById（{commit}，id）

---

此外，您还可以检查订单是否像这样存在，以避免在提取数据之前出现错误。

这不是对OP具体情况的回答，而是对问题标题的回答。我收到来自vuejs的相同控制台错误消息“无法读取null的属性id”或“无法读取未定义的属性id”

我最终解决了这个问题，检查了我所有的代码，并确保“x.id”的每个用法都在像“if（x）”这样的块中。例如，如果在vue组件的“props”中设置了“x”，则以下操作可能会因“无法读取未定义的属性id”而失败：

类似地，在计算属性中，以下操作可能失败：

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

解决方案是将其包装在

if

块中，如下所示：

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

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

---

不要使用

getOrderById（{commit}，{id}）

，因为您已经在使用对象使用中的id，

getOrderById（{commit}，id）

wow！。。这是一个快速的推荐@AmreshVenugopal:）所以这可能是我编程头疼的原因？我现在就试试看。。我会很快回复您…在VIEWORDER.VUE中，您可能应该使用

mounted（）

而不是

created（）

。如果无法解决问题，请在vuex中执行

mounted（）

hook:

this.id=this.$route.params.id

如果订单为空，您可以尝试将

getOrderById（{commit}，{id}）

更改为

getOrderById（{commit}，id）

，并在mounted（）hook中将其称为

this.$store dispatch（'getOrderById'，id）

。此外，您还可以检查订单是否像这样存在，以避免在提取数据之前出现错误。@TerjeNygård出现错误的原因是

订单

在存储中异步填充。这意味着，安装组件时，

顺序

为

null

。您的模板使用的是

order.id

，它在第一次呈现时基本上是

null.id

，这是无效的。稍后，当您的

getOrderById

ajax调用完成时，order有一个值。Wostex建议使用

v-if

阻止组件尝试访问

order.id

，直到

order

实际有值为止。感谢@krubo:）提供的附加和有用的注释

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