Vue.js 2 Web Development Projects

Smart form

This generic component will take care of the very general structure of our form components, and will automatically call an operation function, display a loading animation and the eventual error messages thrown by the operation. Most of the time, the operation will be a POST request made to the server.

The template is essentially a form with a title, a default slot where the inputs will be rendered, an actions slot for the buttons, a loading animation, and a place for the error messages. This will be generic enough for the two forms we need in the application:

1. Create a new SmartForm.vue component in the components folder:

      <template>        <form @submit.prevent="submit">          <section class="content">            <h2>{{ title }}</h2> <!-- Main content ...