Solution: Lift the State Up

Here’s the solution to lifting the state up.

We'll cover the following


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.

Get hands-on with 1200+ tech skills courses.