camelCased props bound through an object take precedence over a kebab cased specific prop

[thedamon]

Version

2.6.8

Reproduction link

https://codesandbox.io/s/54v49n1nzn

Steps to reproduce

The repro shows the issue directly.

<Child
      v-bind="{
        appleColor: 'objective red',
        bird: 'objective sparrow'
      }"
      :apple-color="`proper red`"
      :bird="`proper sparrow`"
    />

What is expected?

I wanted to know what takes precedence when something is bound using v-bind={} vs set explicitly as a prop. I would expect this to always be one or the other, or to be resolved in order of declaration as when merging objects in JS ({...boundProps, specificProp })

What is actually happening?

The precedence is determined based on whether a prop has multiple words. duplicate keys are set by the object when they are declared in dash-case, and set by the prop/attribute if they are camelCase or a single word.

---

This can be made 'consistent' by declaring multiword props using camelcase, but that's against the recommendations in the styleguide which suggest using dash case for multiword props inside templates: https://vuejs.org/v2/style-guide/#Prop-name-casing-strongly-recommended.

I ran into this when an undefined value bound to a parent was overriding the same value explicitly set in the child, but it wasn't happening consistently depending on what the names of the props were.

[posva]

Indeed, seems that the camelCase version always takes precedence.
It's fixed if using a camelCased prop: appleColor

The expected behaviour would be the specific apple-color to always take precedence regardless of the order of HTML attributes

[thedamon]

I was actually in the midst of submitting a PR to the API docs in the v-bind section to say what takes precedence (since I think it makes sense to mention that) when I did a test and realized that there's not a simple answer.

[posva]

I forgot to say but this rings a bell but I couldn't find the issue/pr related but I'm pretty sure there was something already opened