8. The State of Vue.js State Management

Activity 8.01: Adding Email and Phone Number to a Profile Card Generator

Solution:

Perform the following steps to compete the activity:

Note

To access the code files for this activity, refer to https://packt.live/3m1swQE.

1. We can start by adding a new email input field and label to src/components/AppProfileForm for the Email field:

   <template>
     <!-- rest of template -->
       <div class="flex flex-col mt-2">
         <label class="flex text-gray-800 mb-2" for="email">Email
         </label>
         <input
           id="email"
           type="email"
           name="email"
          ...