Single file component <template> section

In this part, we will change the <template> section of the single file component. Follow these steps to do it:

1. Open the App.vue file in the src folder.
2. At the bottom of the template, we need to create a new input HTML element, with the v-model directive bound to the userId property:

<h1> Get User ToDos </h1>
<label for="userData">
  User Id:
  <input type="number" step="1" v-model="userId">
</label>

3. To fetch the list of items, we need to create a button with an event listener bound on the click event with the @click directive, targeting the getUserTodo, and passing the userId in the execution:

<button
  style="margin: 20px;"
  @click="getUserTodo(userId)"
>
  Fetch Data
</button>

To run the server and see your component, you need to open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:

...