Description
Version
2.5.3
Reproduction link
https://vuejs.org/v2/guide/render-function.html#Template-Compilation
(Alternative reproduction on jsfiddle: https://jsfiddle.net/Linusborg/pqbppg7a/)
Steps to reproduce
- Paste the following piece of HTML into the textarea of the linked documentation chapter above.
<input type="text" v-bind:value="message" v-model="message">
- Inspect the code of the created render function, especially the
domProps
options:
domProps: {
"value": message,
"value": (message)
},
What is expected?
The code should run in all browsers, or throw an error or warning.
What is actually happening?
IE11 throws an error: "duplicate properties not allowed in strict mode".
I realize that using both v-bind:value and v-model on an input is not recommended or even sensible, but it doesn't throw an error or warning when done in modern browsers, and doesn't create any problems if the expression is the same for both, so it can easily be overlooked when added accidentally.
Uglify also doesn't help - it doesn't remove the first occurrence that would otherwise be "overwritten" by the second in modern browsers.
So what would be a sensible solution? I'm not sure.
- We could adjust the codegen of domProps to check for a double occurence of the
value
prop on elements of type "input" and drop all but the last occurrence. Possible Problem: performance? - We could log a warning to console (how to deal with that in vue-loader?)
- We could throw an error, forcing the user to choose between the two (breaking change)
- we could improve awareness by adding a warning to docs and a rule to eslint-plugin-vue?