playground.vue

<template>
  <v-card max-width="400" class="mx-auto">
    <v-toolbar>
      <v-toolbar-side-icon></v-toolbar-side-icon>
      <v-toolbar-title>Cart</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>
      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-toolbar>

    <v-list two-line>
      <v-subheader>{{ cart.length }} Items in your cart</v-subheader>

      <v-list-item
        v-for="(item, i) in cart"
        :key="i"
      >
        <v-list-item-avatar tile color="grey"></v-list-item-avatar>

        <v-list-item-content>
          <v-list-item-title v-text="item.name"></v-list-item-title>
          <v-list-item-subtitle v-text="item.stock"></v-list-item-subtitle>
        </v-list-item-content>

        <v-list-item-title v-text="parseFloat(item.price).toFixed(2)"></v-list-item-title>
      </v-list-item>
    </v-list>

    <v-divider class="ma-3"></v-divider>

    <v-card-text>
      <v-layout justify-space-between align-end mb-4>
        <div class="text-uppercase grey--text subtitle-1">Total</div>
        <div class="headline" v-text="total"></div>
      </v-layout>

      <v-layout justify-space-between subtitle-1>
        <div>Subtotal</div>
        <div class="grey--text" v-text="parseFloat(subtotal).toFixed(2)"></div>
      </v-layout>

      <v-layout justify-space-between subtitle-1>
        <div>Shipping</div>
        <div class="grey--text" v-text="parseFloat(shipping).toFixed(2)"></div>
      </v-layout>

      <v-layout justify-space-between subtitle-1>
        <div>Tax</div>
        <div class="grey--text" v-text="parseFloat(tax).toFixed(2)"></div>
      </v-layout>
    </v-card-text>
  </v-card>
</template>

<script>
  export default {
    data: () => ({
      cart: [
        {
          name: 'Pencil',
          price: 1.50,
          stock: 'in stock'
        },
        {
          name: 'Rubberbands',
          price: 4.50,
          stock: 'in stock'
        },
        {
          name: 'Rulers',
          price: 8.00,
          stock: 'only 1 left in stock'
        },
        {
          name: 'Clock',
          price: 22.00,
          stock: 'in stock'
        }
      ],
      shipping: 2.00
    }),

    computed: {
      subtotal () {
        return this.cart.reduce((acc, item) => (acc + item.price), 0)
      },
      tax () {
        return parseFloat(this.subtotal * 0.09)
      },
      total () {
        return (
          this.subtotal +
          this.tax +
          this.shipping
        )
      }
    },
  }
</script>