Question

我的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: "velma32@example.org",
        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>

我遇到

错误

Cannot read property 'name' of undefined

我该如何解决？谢谢

Answer 1

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

order.address之所以有效，是因为订单可能是对象，因此在获取API响应之前，未定义order.address 。但是，对于 order.customer.name，客户是未定义的，因此customer.name会中断。

放一张{{order.customer && order.customer.name}}的支票，它应该可以正常工作

Answer 2

将其更改为：

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

在axios中得到未定义的错误

2 个答案: