Laravel 9 Vue 3 Cart Count problem...

function totalQuantity() {
	let total = 0
	for(let k in cart)
		total += cart[k].quantity;
	return total;
}

You can add function as a computed property and then use it as

{{ totalQuantity }}

https://vuejs.org/guide/essentials/computed.html

@aluckman321 Space Marines? Is this Warhammer 40K? That certainly takes me back 15 years or so 😅

I’m not sure where you’re storing this cart variable, whether it’s a prop or a data member. But to answer your questions, you can use computed properties to calculate both the item count, and the item subtotal from your cart array:

computed: {
    itemCount() {
        return this.items.reduce(function (carry, item) => {
            return carry + item.quantity;
        }, 0);
    },
    itemTotal() {
        return this.items.reduce(function (carry, item) => {
            return carry + (item.quantity * price);
        }, 0);
    },
}

So assuming this.cart is an array in either your props or data, the reduce method will run a function over each item in the array, and add to a carry value, eventually ending up with either the total number of items in the itemCount computed property, or the item total in the itemTotal computed property. You’d call these computed properties just like any other property in your template:

<p>You have {{ itemCount }} item(s) in your cart.</p>
<p>Cart total: {{ itemTotal }} GBP</p>

If you’re using the Composition API in Vue 3, then those computed properties would look like this instead:

const itemCount = computed(() => items.reduce(function (carry, item) => {
    return carry + item.quantity;
}, 0));

const itemTotal = computed(() => items.reduce(function (carry, item) => {
    return carry + (item.quantity * item.price);
}, 0));