I am looking to have my burger.price
(if there is a custom burger in the cart) to be added to the total with the item.price
. Any help would be great! I am new to using vue and vuex.
<template>
<div>
<b-button v-b-modal.modal-1>Cart({{numInCart}})</b-button>
<b-modal id="modal-1" size="xl" title="Shopping Cart" ok-title="Checkout" cancel-title="Continue Shopping">
<table class="table">
<tbody>
<!-- replace in cart with custom burger -->
<tr v-for="(item, index) in cart" :key="item.id">
<td>{{ item.name }}</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>{{ item.price | dollars }}</td>
<td>
<button class="btn btn-sm btn-danger" @click="removeFromCart(index)">×</button>
</td>
</tr>
<tr>
<th>Name</th>
<th>Bun Type</th>
<th>Cooked Style</th>
<th>Cheese Type</th>
<th>Toppings</th>
</tr>
<tr v-for="(burger) in customBurger" :key="burger">
<td>{{burger.name = "Custom Burger"}}</td>
<td>{{burger.bun}}</td>
<td>{{burger.cookedStyle}}</td>
<td>{{burger.cheese}}</td>
<td>{{burger.toppings}}</td>
<td>{{burger.price | dollars }}</td>
<td>
<button class="btn btn-sm btn-danger" @click="removeCustomBurger(customBurger)">×</button>
</td>
</tr>
<tr>
<th></th>
<th>{{ total | dollars }}</th>
<th></th>
</tr>
</tbody>
</table>
</b-modal>
</div>
</template>
<script>
import { dollars } from '../models/filters'
export default {
name: 'ShoppingCart',
computed: {
customBurger() {
return this.$store.getters.customBurger;
},
inCart() { return this.$store.getters.inCart; },
numInCart() { return this.inCart.length; },
cart() {
return this.$store.getters.inCart.map((cartItem) => {
return this.$store.getters.forSale.find((forSaleItem) => {
return cartItem === forSaleItem.invId;
});
});
},
total() {
return this.cart.reduce((acc, cur) => acc + cur.price, 0);
},
},
filters: {
dollars,
},
methods: {
removeFromCart(index) { this.$store.dispatch('removeFromCart', index); },
removeCustomBurger(){this.$store.dispatch('removeCustomBurger');},
},
};
</script>