Description
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.