Now that you have a basic understanding of Vue's event handling, methods, computed properties, and so on, you should try something a bit more challenging. Start by creating an array of "Mayor" candidates. Each candidate has a "name" and a number of "votes". Use a button to increase the count of votes for each candidate. Use a computed property to determine who is the current Mayor, and display his name.
Finally when key C is pressed the elections start from the beginning, and all votes become 0:
Tip
JavaScript's sort()
and map()
methods could prove very useful and key modifiers will get you there.
To listen globally for events you should target the body
element.
Example output
You can find a potential solution to this exercise here: https://goo.gl/2Sx4a5.