I am currently working on a basic page that displays data fetched from the server.
Here is the setup:
<p>Customer's name for the order: {{ order.customer.name }}</p>
Javascript:
export default {
data () { return { order: {} } },
mounted () { this.fetchOrder() },
methods: {
fetchOrder () {
/* Retrieving order data asynchronously from the server */
.success(function () { this.order = data_from_server })
}
}
}
While everything functions as expected, there is an issue appearing in the browser console: "Cannot read property 'name' of undefined". It seems that the error arises when attempting to access order.customer.name before the order data is completely retrieved from the server, resulting in order.customer being undefined.
Is there a way to handle this error and prevent it from occurring? What would be the most optimal solution?
One possibility could involve explicitly defining the structure of the order (e.g. order: { customer: {} }), but this may not be ideal, especially as the data structure becomes more complex with nested objects at various levels.