4. Nesting Components (Modularity)

Activity 4.01: A Local Message View with Reusable Components

Solution:

Perform the following steps to complete the activity.

Note

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

First, we need a way to capture messages from the user:

1. Create a MessageEditor component that displays a textarea:

   <template>
     <div>
       <textarea></textarea>
     </div>
   </template>

2. Adding a reactive instance property can be done using the data component method:

   <script>
   export default {
     data() {
       return {
         message: ''
       }
     }
   }
   </script>

3. On change of textarea, we will store the state in a message reactive instance variable that we have set to null in the data component method:

   <template>
     <!...