⏰ 15 mins


  1. In this exercise, we’ve added a profile editor card alongside the User Profile Card. You should complete the following tasks to get it working.
  2. Emit the updated values when the user submits the form

<aside> ⚠️ Do NOT emit anything until the form is submitted

</aside>

  1. Validate the event payload to ensure:
    1. the username isn’t missing
    2. there is at least 1 skill provided

<aside> 💡 FYI - it’s not important to provide form validation for this exercise. I’m only worried about practicing the event payload validation

</aside>

  1. Listen for the updated values in exercise-8-begin and set the user data to the new values from the form
  2. By the end of the exercise you should have something that looks like this

update-profile-card.mp4

💪 Bonus

If you finish the exercise early, add a message event to the UserProfileCard that fires whenever the message button is pressed. Then on the page listen for the event and alert “You messaged [User Name]”

Helpful Resources

  1. Vue.js Docs - Component Basics
  2. Vue.js Docs - Events