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

Question

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.

It looks like you have asked and answered your question all within the question and you are asking other users to comment. Please have a look at how to break up your question into a question and an answer: How to ask a good question — peejay
– peejay, Commented Sep 26, 2024 at 7:45
As you already found the answer, please rephrase your post to only contain the question and then write the answer that works for you in the Answers section below. — IP002
– IP002, Commented Sep 26, 2024 at 8:20
Besides the point on self-answer above, the suggested solution is a hack. These aren't just brackets but array notation, you're passing an array where a string is expected. It's a lucky coincidence that an array is stringified to a value you need. "If the type attribute is not specified in the parent, a type attribute does not show up" - this is normal behavior. If you want it to behave differently, you can do :type="$attrs.type ?? '' ". And better to use a prop at this point because you modify how the attribute works — Estus Flask
– Estus Flask, Commented Sep 26, 2024 at 8:41
The suggested solution was to NOT use the array notation. This is when the desired behavior is observed, ie. if type= is not specified in the parent, then there should not be a type attribute in the child component. If the bracket notation is used in the child, then when the parent does not specify the input attribute, the child inserts a type attribute without the a value, undesirable effect. — Tioia
– Tioia, Commented Oct 1, 2024 at 17:04

Tioia · Accepted Answer · 2024-10-01 16:37:49Z

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.

answered Oct 1, 2024 at 16:37

Tioia

517 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related