Challenge 2 / 2

In the video, we showed this computed property, which merges the data returned by our watcher with the data that is present in the cart:

completeCart() {
    if (!this.cart || !this.products) {
        return null;
    }

    const completeItems = this.cart.items.map((cartItem) => (
        {
            product: this.products.find((product) => product['@id'] === cartItem.product),
            color: cartItem.color,
            quantity: cartItem.quantity,
        }
    ));

    return {
        items: completeItems,
    };
},

Take a closer look at the beginning of this function:

if (!this.cart || !this.products) {
    return null;
}

Why are we adding this check here? And what would happen if we didn't have it in place?

Without that check in place, our application won't load. We would see a blank page and an error in the console

This check is redundant. It is nice to have it, but our application can work just the same without it.

Without that check in place, our application will have errors in the console and our template will load, but with some bugs regarding reactivity. Data might change in the future that won't be reflected in our app.

Without this check, our template won't load until both variables get populated. We will have errors in the console, but once the data is loaded, the template would render successfully.

Rewatch the video