If you are making any web application, you will constantly deal with repetitive form Input blocks. Now, there are many ways to tackle this pattern.
In laravel, you can refactor this to blade component, or you could simply leverage Form packages.
Here is one other way, that can be pulled with vuejs.
Step 1: Assumption
Let’s assume, your typical form block has code structure like this one.
Step 2: Conversion
Now, we will convert this to a vue template.
Step 3: A special case for select input.
Since, select works pretty much differently, we will have to create a separate template for this.
Step 4: Register a component
Since our templates are ready, we register two components here.
Step 4: Preparing props
Now, we create a new form input that will use these components.
Step 5: In your template
Next, we will use this input component in our Vue app and we get to render it in our main template. Something like this.
Step 6: See your results.
The above component will render the following HTML.
Now, go ahead and try with the select box.
Everything is awesome.