Search⌘ K
AI Features
Home
Courses
Mastering TypeScript

Checkout and Item Rendering

Explore how to create CheckoutView and ItemTotalView components in Vue with TypeScript. Understand rendering table rows for shopping cart items, calculating totals, taxes, and formatting values for display.

We'll cover the following...

CheckoutView component

The second-to-last component that we will need is the CheckoutView component. Remember that this component is displayed by the ShoppingCart component when the user clicks on the “CHECKOUT” button. There is nothing unusual about this component other than that the template uses a table to display the items in the shopping cart and has a number of computed properties. Again, in the interest of brevity, we will not show the entire template for this component; please refer to the sample code for this.

Our CheckoutView component calculates a few values. The first of these values is the total amount of all items that are in the shopping cart, as follows:

TypeScript 4.9.5
totalValue() {
  let total = 0;
  for (let item of this.basket.items) {
    total += <number>item.amount * +item.specs.price;
  }
  return total * 100;
}

  • Line 2: We have a variable named ...