Apologies if this has been posted in some other variation before, but I can’t seem to find a good thread on how to do it in my use case. I’m getting tripped up on how to make Vue more OOP based (more importantly how to inherit from other components). I’m attempting to use Composition API, as it seems more like a flexible option, but maybe I’m missing how to properly leverage it.
I have a base component called FieldText. This sets up the initial template and boilerplate code for all of my other Field* components (Number, Checkbox, etc.) and allows for adding in custom attributes to the input element, like the input type, and validation rules that only apply to the Field* component… like min and max only work for number and date like fields, so I’d only like to contain this logic to those components.
Then I have FieldNumber, which attempts to “extend” from FieldText by using it as the template. The problem here is that when I do the v-bind="$props", it’s not actually going to the input element… it’s going to the parent div. You can solve this by setting inheritAttrs: false on FieldText and doing a v-bind on the input el, but then I won’t have classes go to the parent element.
I could use Pug, but this looks like it comes with its own quirks, and I’m not sure it’d truly solve my issue. I also could try to abstract this out to composables, but that only solves the logical aspect, not the markup aspect.
I’m playing around with the idea of passing some sort of inputAttrs to FieldText, but the setup methods don’t interact. Now I’ve come to the conclusion that I’m not using Composition API properly, and I don’t know how I’d refactor this to behave in a more OOP fashion. Can someone provide some insight as to how I would approach this?