Description
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:
- inherit attributes
v-bind="$attrs"
- Set the type attribute on the input
type="checkbox"
- 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/