Html Question posted in
Some basic documentation can be found here.

Html – type="text" does not fallthrough to a vuejs child component having an <input> element

I have a child component with an <input> element. I can customize the component from a parent using several attributes like placeholder, maxlength, required, etc. But I cannot get type= to fallthrough like the rest.

I’ve searched for hours but I can’t find anything that specifies that ‘type=’ is handled differently…

For example:

Parent component:

<template>
    <child-component type=text maxlength=20 />
</template>

Child component

<template>
    <input :type="[$attrs.type]"  :maxlength="[$attrs.maxlength]" />
</template>

‘maxlength’ and other attributes fall through as expected, including parent’s class and style attributes merging with the child’s class and style attributes.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    As suggested, I'm moving my own answer from the question area to the answer section.

    I did some experimenting and found that:

    If the type attribute is not specified in the parent, a type attribute with no value shows up in the child element (not desirable), but only if there are the square brackets around the attrs object specification, like :type="[$attrs.type]".

    If the type attribute is not specified in the parent, a type attribute does not show up in the child element (desirable) if there are not square brackets around the attrs object specification, like :type="$attrs.type".

    It looks like the no square brackets format is the way to go.

    Hope this helps others as I had to do a lot of trial and error testing to come to these observations. If anybody can add to this discussion, please comment.


  2. 0

    1. I don’t think its a good idea to have a common Input component for all types. It will clutter your logic. Having separate input component for each field is a much better way.

    2. Answering your problem, you could do

    <child-component input-type="text"/>

    In your Child Component

    <input :type="inputType"/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search