Skip to content

$attrs incorrectly overriding props #6325

Closed as not planned
Closed as not planned
@ol1s

Description

@ol1s

Vue version

3.2.37

Link to minimal reproduction

https://stackblitz.com/edit/github-egwnjl?file=app.vue,components%2FComponent1.vue,components%2FComponent2.vue

Steps to reproduce

A component has a prop defined with the same name as an inherited attr

What is expected?

I would expect the defined prop to take precedence over the inherited attr

What is actually happening?

The inherited attr is actually overriding the defined prop

System Info

No response

Any additional comments?

There is a workaround to disable inheritance inheritAttrs: false and bind without the conflicting attr v-bind="attrsWithoutBar" however as you can see below it is a bit hacky:

computed: {
  attrsWithoutBar() {
    //this is a hack to ensure the `bar` attr 
    //doesnt override the `bar` prop
    const attrsCloned = { ...this.$attrs }
    return delete attrsCloned.bar && attrsCloned
  },
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions