Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Set operation on key "value" failed: target is readonly always warned with useTemplateRef #11795

Closed
Cherry opened this issue Sep 3, 2024 · 2 comments

Comments

@Cherry
Copy link
Contributor

Cherry commented Sep 3, 2024

Vue version

3.5.0

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-whst6h?file=src%2Fcomponents%2FHelloWorld.vue

Steps to reproduce

  • open Stackblitz URL
  • wait for build
  • open dev tools
  • observe the following warning:
    [Vue warn] Set operation on key "value" failed: target is readonly. RefImpl {dep: Dep, __v_isRef: true, __v_isShallow: true, _rawValue: input, _value: input}
  • changing the value in the input triggers the warning again

What is expected?

No warning to be logged

What is actually happening?

Unexpected warning is being logged

System Info

via StackBlitz:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    vue: ^3.5.0 => 3.5.0 
@Cherry Cherry changed the title Set operation on key "value" failed: target is readonly always thrown with useTemplateRef Set operation on key "value" failed: target is readonly always warned with useTemplateRef Sep 3, 2024
@jh-leong
Copy link
Member

jh-leong commented Sep 3, 2024

Workaround: Avoid naming a variable declared with useTemplateRef the same as a template ref: Playground

@jh-leong jh-leong added the 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. label Sep 3, 2024
@edison1105 edison1105 added 🔩 p2-edge-case scope: compiler and removed 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels Sep 4, 2024
@edison1105
Copy link
Member

@jh-leong I think this is an edge case, maybe we can show a warning at compile time

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.