-
-
Notifications
You must be signed in to change notification settings - Fork 8.9k
Open
Labels
🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.scope: reactivity
Description
Vue version
3.5.18
Link to minimal reproduction
https://github.com/arfedulov/vue-reactive-push-reproduce
Steps to reproduce
- Clone the repository.
- Run dev server.
npm i
npm run dev
- Look at "example with ref()".
- Click (1) button
- See that item was added (that's correct)
- Click (2) button
- See that item was added and there is no warnings (that's incorrect, because the array is readonly)
- Click (3) button
- See that item was not added and there is a warning in console "Set operation on key "items" failed: target is readonly" (that's correct)
What is expected?
The array always stays immutable when wrapped in readonly()
.
What is actually happening?
An object wrapped in readonly()
stays mutable by Array.prototype.push()
call on its property.
System Info
System:
OS: Linux 6.14 Ubuntu 24.04.3 LTS 24.04.3 LTS (Noble Numbat)
CPU: (24) x64 13th Gen Intel(R) Core(TM) i7-13700KF
Memory: 21.78 GB / 31.16 GB
Container: Yes
Shell: 5.2.21 - /bin/bash
Binaries:
Node: 22.14.0 - ~/.nvm/versions/node/v22.14.0/bin/node
npm: 10.9.2 - ~/.nvm/versions/node/v22.14.0/bin/npm
Browsers:
Chrome: 140.0.7339.127
npmPackages:
vue: ^3.5.18 => 3.5.21
Any additional comments?
This is only the case when we create object like this readonly({ myArray: ref([]) })
. There is no problem if we create object
like this readonly(reactive({ myArray: [] }))
, as you can see in "example with reactive()".
Metadata
Metadata
Assignees
Labels
🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.scope: reactivity