Search⌘ K
Home
Courses
Mastering TypeScript

Component Details: ShoppingCart and Checkout

Explore how to create a ShoppingCart component in Vue that manages a collection of items and toggles between the cart and checkout views using TypeScript. Understand rendering through conditional directives, event handling for item removal, and passing data between components to build a dynamic user experience.

We'll cover the following...

The ShoppingCart component receives the collection of items in the cart and renders either the shopping cart screen or the checkout screen. The option to show either screen is controlled by a single boolean value, which is either on or off.

Template section of the ShoppingCart component

Let’s take a look at the template section of the ShoppingCart.vue component first:

TypeScript 4.9.5
<template>
  <div class="container">
    <div 
        v-if="!isCheckingOut"
    >
    &nbsp;
    <h2>Shopping Cart</h2>
    <hr />
    <div 
      v-bind:key="item.id"
      v-for="item in collection.items"
    >
      <ItemView 
        :item="item"
        @on-remove="onItemRemoved"
      ></ItemView>
    </div>
    <button 
      class="btn btn-primary"
      v-on:click="checkout"
      >Checkout</button>
    </div>
    <div v-if="isCheckingOut">
        &nbsp;
    <h2>Check Out</h2>
    <hr />
    <CheckoutView 
      :basket="collection"
    ></CheckoutView>
    <button 
      class="btn btn-secondary"
      v-on:click="back()"
    >Back</button>
    &nbsp;
    <button
      class="btn btn-primary"
    >Place Order</button>
    </div>
  </div>
</template>

  • Our template starts with a <div> element with the Bootstrap class of "container".

  • We then have a <div> element on ...