cart.vue

<template>
  <ul class="list-group">
    <li class="list-group-item">
      <span class="item-name"><strong>Name</strong></span>
      <span class="item-price float-right"><strong>Price</strong></span>
    </li>
    <li v-for="(item, index) in items" :key="index" class="list-group-item">
      <span class="item-name">{{item.title}}</span>
      <span class="item-price float-right">{{item.price}}</span>


    </li>
    <li class="list-group-item">
      <span class="item-name"><strong>Total price</strong></span>
      <span class="item-price float-right"><strong>{{ grossTotal }}</strong></span>
    </li>
  </ul>

</template>
<script>
export default {
    props:['items'],
    computed: {
      grossTotal () {
          var total = 0;
          this.items.forEach(item => {
            var price = item.price.toString().substring(1, item.price.toString().length - 1);
            console.log(price)
            total += parseFloat(price)
          })

          return `$${total}`
        }
    }
}
</script>
<style>

</style>