Skip to content

Iteration on array in event handler function #12232

Open
@Ericlm

Description

@Ericlm

Vue version

3.5.12

Link to minimal reproduction

https://github.com/Ericlm/vue-for-of

Steps to reproduce

  • Create a new Vue project
  • Create a function that is an event handler in the template (something like @click="() => {}")
  • If this function receives or creates an array, this array does not always iterate through its items (which are then undefined).

What is expected?

Using a for loop (which could be for-of, for, or forEach) should not make any item "disappear" for the original array.

What is actually happening?

The for loop looks empty, or filled with undefined. For example, with an array of 5 numbers, it can print 5 undefined.

image

System Info

System:
    OS: macOS 15.0.1
    CPU: (8) arm64 Apple M1
    Memory: 88.38 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.6.0 - ~/.asdf/installs/nodejs/22.6.0/bin/node
    npm: 10.8.3 - ~/.asdf/plugins/nodejs/shims/npm
    pnpm: 9.9.0 - ~/.asdf/installs/nodejs/22.6.0/bin/pnpm
  Browsers:
    Chrome: 129.0.6668.103
    Safari: 18.0.1
  npmPackages:
    vue: ^3.5.12 => 3.5.12

Any additional comments?

⚠️ It does not occur 100% of the time, but it seems to occur each time the server starts. Sometimes, on HMR, it suddenly works perfectly.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions