Hiding and Removing

Some things you won't need after all: you've booked a cabin, so the tent can stay at home. And once most things are packed, you'd rather see only what's left.

Removing. Give each item a second button, Remove, which removes the item from the list. The count changes too: with nothing packed, removing the tent makes it 0 / 6 packed.

Hiding. Above the list, add a button Hide packed. A click on it hides the packed items, and the button then says Show packed. A click on that shows them again. Hidden items are still on the list, only out of sight, so the count still counts them. And an item that you pack while packed items are hidden disappears at once.

A tip: keep in a ref whether packed items are hidden. And remember that v-if and v-for never go on the same element: let v-for go through the array that a function returns, with all the items, or only the ones not packed yet.

That's the whole project. Your packing list is made from data: the array items and a ref that says whether packed items are hidden. Each click changes the data, and Vue updates everything that's made from it: the list, the buttons, the crossed-out items, the count and the message. You never changed the page yourself, as you did with textContent in the JavaScript course. In the next lesson, Forms, you'll let the user type: names, notes and choices go straight into refs with v-model, and a form adds new orders to a list.