Skip to content

v-bind=$attrs overrides the input type attribute in 2.5.14 and above #7811

Closed
@linnea

Description

@linnea

Version

2.5.14

Reproduction link

https://jsfiddle.net/linnea/onw3Lfm4/2/

Steps to reproduce

Create a custom component with an input wrapped in a div and:

  1. inherit attributes
    v-bind="$attrs"
  2. Set the type attribute on the input
    type="checkbox"
  3. Have a v-model on that input.

What is expected?

The inner input still receives type="checkbox"

What is actually happening?

No type attribute is inherited


We have a custom checkbox component that provides label styling etc, and used to be able to declare the input type as well as inherit attributes from the component. Other attributes that are set on the inner input are passed correctly (ie disabled, :true-value, etc), but not the type attribute, unless you bind it. This was working prior to v2.5.14.

A temporary fix we've implemented is changing type="checkbox" to :type="'checkbox'", or setting v-bind="$attrs" to a computed property that returns an object with Object.assign({ type: 'checkbox'}, this.$attrs);

Removing the v-model from the input also fixes it, but we use it to handle multiple checkboxes, bound to the same array

Here's the same fiddle above, working in 2.5.13
https://jsfiddle.net/linnea/onw3Lfm4/4/

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions