Solution: Lift the State Up

Solution

Your task was to lift the content state up from the Editor to the App component. Here are the required changes:

For the src/components/Editor.vue file:

• Remove the content state from the Editor component and add it to the App component.
• Remove the v-model directive from the textarea element.
• Add the :value=”content” prop and input an event listener that emits the update:content event with the latest value of the textarea field.
• Add an emits property with an array containing update:content event.

For the src/App.vue file:

• Add the content state.
• Add a v-model:content=”content” directive on the Editor component. Pass the content state as a prop to the Preview component. Let’s run the following code to understand how the solution above works.

Note: The code below may take a while to run. When the server starts, go to the app URL, and see the output.