I wish to wrap different types of input with a label and an error message, so far I have come up with this solution, using slots:
Input Text Component: (but there are also others for select, checkbox etc)
<form-input>
<input type="text" @click="doSomething"> //could be select, checkboxes etc. slotted in
</form-input>
Generic Form Input Component:
<div>
<label v-text="label"></label>
<slot></slot> //where each input is placed
<p v-if="hasError">This {{ this.name }} has an error!</p>
</div>
On Input Text Component I also use a mixin that handles all the errors and other form bits, I need to declare this in every different input type, select, checkbox etc.
Is there an easier way to achieve this, I want to:
- Wrap various inputs with errors and labels.
- Use the same functionality from a mixin (or declared as something else) for every component but not repeat the declaration - I cannot add it on the generic form input component as it is referenced in the data in the parent to be slotted in.