difficulty | training | chapter | tags |
---|---|---|---|
1 |
true |
Chapter 2: Vue.js Components |
vue |
Now that we know how to extract a component, let's go a little bit further and extract the form to its own component. We will do similar to the last coding challenge, extracting the template and the logic for creating and editing a movie.
- Create a
MovieForm.vue
component. - Move the template for a movie form into the
MovieForm.vue
component. - Move the logic for validation into the
MovieForm.vue
component. - Listen to custom events for that component.
- Move the current template for the form into the
MovieForm.vue
component. - Replace the current part of our template where the form is displayed, with the
MovieForm.vue
component - The
MovieForm.vue
component should have the following props:modelValue
: It should receive the movie object, it should be optional.
- Create
2
custom events in theMovieForm.vue
component.update:modelValue
: Should be dispatched when the user clicks thesave
button and include theform
as the payloadcancel
: Should be dispatched when the user clicks thecancel
button and requires no payload.
- The rest of our application functionality should still work as expected.
- If you see the
data-test
attribute anywhere in the boilerplate don't remove it. - TailwindCSS is preinstalled with the default config. It might be helpful for you, if you want to have some styles. (Not obligatory)
This is an example of what the functionality should look like for the completed exercise. If you’d like to mimic this style, feel free to do so, but it is not required.