Skip to content

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

@shaunakv1

Description

@shaunakv1

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    ❗ p4-importantPriority 4: this fixes bugs that violate documented behavior, or significantly improves perf.🐞 bugSomething isn't workingregressionscope: reactivity

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions