What to Pack

Time for a project! This checkpoint puts the first four lessons to work: refs, events, conditions, lists and classes. As in the checkpoints of the JavaScript course, the instructions say what the page should do, and how you write it is up to you. Each exercise continues where the previous one ended.

The project. You're going to the mountains for the weekend, and you're making a packing list for the trip. Over three exercises, you'll show what to take and pack it with a click, then count what's already in the backpack, and finally hide what's packed and remove what you won't need.

The data. In App.vue, the ref items holds an array with an object for each thing to take: its id, its name, and packed, which says whether it's in the backpack yet:

{ id: 1, name: "Tent", packed: false }

The template has a heading and an empty list (ul), and style.css has the class packed, which crosses an item out.

The task. Show every item of items in the list, as an li with the item's name, and give each li a key. Each item also gets a button: Pack while it isn't packed, Unpack once it is. A click on it packs the item, or unpacks it again, and a packed item's li has the class packed.

A tip: a handler can get the item as its argument and change it: item.packed = !item.packed. The item is one of the objects in the ref's array, so Vue sees the change and updates the page.