chrome 72, `v-bind={...props, ...attrs}`, will get empty object
Vue version
3.3.4
Link to minimal reproduction
Steps to reproduce
use chrome 72, we use v-bind={...props, ...attrs}
, will get empty object
What is expected?
get correct value, like Object.assign
What is actually happening?
get empty object
System Info
chrome 72
Any additional comments?
No response
Syncing our private discussions here:
- This is a known bug in Chrome < 74 that spread operator + Proxy doesn't behave correctly https://bugs.chromium.org/p/chromium/issues/detail?id=960744
- There isn't much we can do in Vue.js core to work around this bug
Object.assign
seems to work correctly.- So the most straightforward workaround is to transpile spread operators to
Object.assign
if you target Chrome < 74. - With Babel, you can do this by manually adding
@babel/plugin-transform-object-rest-spread
to yourbabel.config.js
- To fix it for all
@babel/preset-env
users, you can submit a PR toBabel to update the. (Update: it's compiled from https://github.com/mdn/browser-compat-data/blob/main/javascript/operators/spread.json) https://github.com/babel/babel/blob/c3eb254e429ddc52e31fff8fc205010eab65ca40/packages/babel-compat-data/data/plugins.json#L316-L328@babel/compat-data
package. It currently only transpiles spread operator for Chrome < 60
- So the most straightforward workaround is to transpile spread operators to
- Anyway, it's out of the scope of this repository. So I'm closing this issue.