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

Update to 3.5 breaks existing code when input value binding is an object #11792

Closed
shaunakv1 opened this issue Sep 3, 2024 · 0 comments · Fixed by #11794
Closed

Update to 3.5 breaks existing code when input value binding is an object #11792

shaunakv1 opened this issue Sep 3, 2024 · 0 comments · Fixed by #11794
Labels
❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. 🐞 bug Something isn't working regression scope: reactivity

Comments

@shaunakv1
Copy link

shaunakv1 commented Sep 3, 2024

Vue version

v3.5.0

Link to minimal reproduction

https://play.vuejs.org/#eNp9ksFOGzEQhl9l5AutlGxaAj2slkgt4tAeaFW4YYSc3Ulw8NqW7V2CVvvujG02gIS4eeb/Z/zN2AP7aW3Rd8hKVvnaSRvAY+jsimvZWuMCDOBwAyNsnGnhiKxHXHNdG+0D1PdYP2BzKVr0cBaNX25uv05qkOgO6UGU8H0G6xKOxxnEaJmik5foNEU/xlheLTIKQVAQsLVKBKQIoGpkvzrP14KO95YwDO9BxrFaRFuqpgP0841xZ5xFIJA6g3EGtRLeU77182POcn+pbUfoTxZJSG3XZk9e2VC8E/UDncteqC7qsRHF/bw1Daqp4IWDhEXuqcQaFWSG3GI1DLG2EJE1yeScqKvFYWQ2Y8HTNjdyW+y80fRMQ2xJN5nWSoXurw2Sts0Z7SEqURNKmcc/KRdch7Mpn+g+yO88TVjS4Z9Dj65Hzg5aEG6LIcsXV5e4p/NBpLE7Re5PxP/ojeoiY7b96nRD2G98ifZ3+mxSb6/9xT6g9tNQETQ6x+TnjD7g+Sejv+Iui5NUx/VIW7zr6cnJTQtcFqfFNzY+A6ax+8U=

Steps to reproduce

(note: this is a snippet and not actual code. May have syntax issues)

//actual related code ( look at the reproduceable example above for better understanding) 

const tiers = [
    { label: "Production", value: "production" },
    { label: "Staging", value: "internals" },
    { label: "Test", value: "test" },
];

const app = createApp({
    data() {
        return {
            tiers: tiers,
            activeTiers: [],
        }
    }
});
{{JSON.stringify(activeTiers)}}
<div v-for="tier in tiers" class="ms-2">
      <input @click="refreshDashboard" type="checkbox" :value="tier" v-model="activeTiers"
          class="btn-check" :id="`job-filter-tier-${tier.value}`" autocomplete="off">
      <label class="btn btn-sm btn-outline-info"
          v-bind:for="`job-filter-tier-${tier.value}`">{{tier.label}}</label>
  </div>

What is expected?

activeTiers is an array of selected checkbox values ( objects from tiers array). This was working upto v3.4.

What is actually happening?

Uncaught TypeError: raw.map is not a function
    at reactiveReadArray (vue@3:1035:41)
    at vue@3:1048:28
    at Array.map (<anonymous>)
    at Proxy.concat (vue@3:1048:17)
    at HTMLInputElement.<anonymous> (vue@3:11832:31)

image

System Info

Vue version: v3.5

imported as: `<script src="https://unpkg.com/vue@3"></script>`


 System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i9-12900HK
    Memory: 34.97 GB / 39.17 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 20.15.0 - /usr/bin/node
    npm: 10.7.0 - /usr/bin/npm

Any additional comments?

If we pin the vue import back to v3.4 this works just fine.

Reproduction :

Breaks ( v3.5): vue playground

Works: (v.3.4) vue playground

@jh-leong jh-leong added 🐞 bug Something isn't working scope: reactivity ❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. labels Sep 3, 2024
@shaunakv1 shaunakv1 changed the title Update to 3.5 breaks existing code related to input value binding is an object Update to 3.5 breaks existing code when input value binding is an object Sep 3, 2024
@github-actions github-actions bot locked and limited conversation to collaborators Sep 19, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. 🐞 bug Something isn't working regression scope: reactivity
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants