Question

在 axios get 中获取未定义错误

2018-08-07

927

javascript vue.js vuejs2 axios

我的 API 响应如下所示

data: {
    id: 9,
    quantity: 2,
    address: "Test Address",
    total_price: 144.42,
    created_at: "August 07, 2018 04:02:46 AM",
    customer: {
        id: 3,
        name: "Prof. Laurel Lemke",
        email: "[email protected]",
        role_id: 3,
    },
    product: {
        id: 7,
        name: "Pellentesque semper",
        description: "raesent sit amet elementum purus.
        price: "72.21",
        cover_image: "7CPVS7yjqba9iJ7J.jpg",
    }

}

我使用 axios 获取该响应，单击按钮时会触发该响应

fetchOrder: function(id){
    let vm = this;
    axios.get('api/order/' + id)
    .then( response => {
        vm.order = response.data.data;
        vm.orderModal = true;
    })
    .catch( error => {
        console.log(error);
    });
},

响应成功，我使用

<span>{{ order.address }}</span> //Test Address

输出该值

<span>{{order.customer.name}}</span>

但是，当我尝试

<span>{{order.customer.name}}</span>

时，我收到错误

Cannot read property 'name' of undefined

我该如何修复此问题？谢谢

Answer 1

问题是您的代码已执行，但 API 调用是 Async ，因此直到 API 返回响应但代码已执行时，客户才被定义。您需要在访问值之前对客户进行检查。

order.address 有效，因为 order 可能是对象，因此 order.address 将未定义 ，直到获取 API 响应。但是，对于 order.customer.name，customer 未定义，因此 customer.name 中断 。

检查 {{order.customer && order.customer.name} ，它应该可以正常工作

Answer 2

将其更改为：

<span>{{order.customer && order.customer.name}}</span>

UtkarshPramodGupta

2018-08-07