How Much Is Packed
Packing goes faster when you can see how far along you are. Under the heading, show how many of the items are packed, in a paragraph with the class count: 0 / 7 packed at the start, 1 / 7 packed after the first click on Pack, and so on.
And when everything is packed, show All packed! Have a good trip. under the list. When you unpack something again, the message goes away.
A tip: the number of packed items is made from items, so you don't need a ref for it. Write a function that works it out and returns it, and call the function in the template, as you did with filtering in the lesson Conditions and Lists. filter() and length will come in handy. Whenever items changes, Vue renders the template again, the function runs again, and the number is always right.
Instructions
- 1
Under the heading, show how many items are packed, in a paragraph with the class
count:2 / 7 packed. - 2
When every item is packed, show
All packed! Have a good trip.under the list.