Project 29: E-commerce Cart
Vue Engineer
Component Task
Objective
Review day: combine computed properties, methods, and v-for — days 4, 5, and 8 — into a real cart total.
You're building a shopping cart.
Task: create an items ref (each with name, price, qty), a total computed summing price*qty, and a removeItem method, all rendered with v-for.
Component.vue
<script setup>
import { ref, computed } from 'vue';
const items = ref([
{ name: 'Sneakers', price: 80, qty: 1 },
{ name: 'Socks', price: 10, qty: 2 }
]);
const total = computed(() =>
items.value.reduce((sum, item) => sum + item.price * item.qty, 0)
);
function removeItem(index) {
items.value.splice(index, 1);
}
</script>
<template>
<ul>
<li v-for="(item, index) in items" :key="item.name">
{{ item.name }} x{{ item.qty }} - ${{ item.price * item.qty }}
<button @click="removeItem(index)">Remove</button>
</li>
</ul>
<p>Total: ${{ total }}</p>
</template>
* Hint: Correct characters turn green, incorrect ones turn red.
Build Output
🟢
Build your component to see the result