Question

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

2017-04-18

11543

vue.js vuejs2 vue-router vuex

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

我花了几个小时进行调试，试图理解为什么 id 属性在登录页面上为空，但通过商店和 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 * 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>

->存储并获取订单 ID（此处的 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...

--> API 调用返回数据

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

--> API 调用返回的示例数据

"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"
},

--> 错误

Answer 1

这不是针对 OP 具体情况的回答，而是针对问题标题的回答。我在 vuejs 中遇到了相同的控制台错误消息“无法读取 null 的属性 id”或“无法读取未定义的属性 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
  }
},

Answer 2

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

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