Vue.js Interview Challenge — #7— List of Wonders
Problem statement
In this challenge, you created a list of List of wonders of the Ancient World. When user hovers over an item on the list, a tooltip with a beautiful rainbow symbolising that it was a true wonder should appear. You used mouseover and mouseleave events to toggle hover property that is responsible for showing/hiding the tooltip.
After creating the list you realised that putting all that <li> elements in your html was not very clean and you decided to create a reusable component for the list item.
Everything went smooth and you used v-for directive to iterate through the wonders to render them. It looks much better now, but… the hover doesn’t work anymore when you hover over the items.
Go through the code and find what needs to be changed to get the component working properly.
Challenge
Take a close look and understand the problem first. Try to solve it on your own. If you get stuck, you can always refer to the solution provided. Good luck!