carthtml.vue

<template>

  <div class="cart-box container">

    <h2>Cart</h2>
    <div v-if="carts">

        <div v-for="itr in this.len" :key="itr">
  
        <div class="product-box">

            <div class="row">

                <div class="col-4" @click="showDetails(itr-1)">
                  <img class="img-fluid" v-bind:src="this.cartItem[itr-1].imgUrl" alt="product-image">
                </div>

                <div class="col-8">

                    <h3 class="product_name" @click="showDetails(itr-1)">{{this.cartItem[itr-1].pName}}</h3>
                    <h3 class="product_description">{{this.cartItem[itr-1].pDescription}}</h3>
                    <h3 class="product_price"><span>$</span>{{this.cartItem[itr-1].pPrice}} per unit</h3>
                    <h3 class="product_description">Quantity : {{this.cartItem[itr-1].pQuantity}}</h3>
                    <h3 class="product_description">Total Price : {{this.cartItem[itr-1].pPrice*this.cartItem[itr-1].pQuantity}}</h3>
                    <button class="button_delete" @click="deleteItem(this.cartItem[itr-1].id)">Delete from cart</button>
                    <form @submit="updateItem(this.cartItem[itr-1].id,this.cartItem[itr-1].pQuantity)">
                      <input v-model="this.cartItem[itr-1].pQuantity"/>
                      <button class="button_update" type="submit">Update</button>
                    </form>

                </div>

            </div>

          </div>

        </div>

        <p>Total Cost : $ {{totalcost}}</p>

    </div>

  </div>

</template>