Vue.js 2 Web Development Projects

Form input component

In our forms, we will have many inputs with the same markup and functionalities. This is the perfect occasion to make another generic and reusable component. It will have a small template with mainly an <input> element and will be able to show the user that it is invalid with a red border:

1. Start by creating a new FormInput.vue component with the following props:
   • name is the HTML name of the input, needed for the browser autocompletion to work.
   • type will be 'text' by default, but we will need to set 'password' eventually.
   • value is the current value of the input.
   • placeholder is the label displayed inside the input.
   • invalid is a Boolean to toggle the invalid display (the red border). It will default to false.

The script ...