Skip to content

v-memo skips updates when used with v-for and within a v-if #12708

@attila8192

Description

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNp9UstOwzAQ/BXjC1RtU6rCpaQVD/UAB0DArUYopJvUbWJbtpMWRfl31k76EEK9rWdmZ2dXruidUkFZAB3T0MSaK0sM2EJNmeC5ktqSimhISE0SLXNyjtLzGyaYiKUwqF3KDZk4xYXVBXR2eCwLYVvisoMN4aBxR198WMhVFlnAFyGhUZEgZZ8nE0adIaMePzCJ1EhBBjnhgsyHn4yS8Rp+WhBfZT+HXOJ77iejYFpVvqxrHI02zaimJL7+LqyVgtzGGY/X7WiMfNZGiJeRSMFvGA4abePxt8+P6XZdS1MdycPBflXao9bgdRKeBisjBV68cn7OIFc8A/2iLMfrMTomnnFclGVy8+Qxd+DeDo+XEK//wVdm6zBGXzUY0CUwuudspFOwDT17f4Yt1nsyl4siQ/UJ8g2MzAqXsZHdF2KBsY90Pu2j/zdcpB9mtrUgzG4pF9Qpa69nFP/Sw4nVD3FHwZXvY6LGK36VoJ0nHnAUXAfDEa1/AVZr6+E=

Steps to reproduce

  1. click the button "change show"
  2. click the button "change show"
  3. click the button "count++"
  4. click the button "count++"

What is expected?

  1. the number is no longer displayed
  2. the number is displayed again
  3. the shown number is updated to 1
  4. the shown number is updated to 2

What is actually happening?

  1. the number is no longer displayed
  2. the number is displayed again
  3. the shown number remains 0
  4. the shown number is updated to 2

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12800H
    Memory: 12.20 GB / 31.69 GB
  Binaries:
    Node: 22.4.1
    npm: 9.3.1
    pnpm: 8.9.0
  Browsers:
    Chrome: 131.0.6778.265

Any additional comments?

It seems the if the memo values are the same when the v-if is hidden and shown again, then an update to the memo values is skipped and only the second change is rendered.

A plausible workaround is to use v-show instead or alternatively make sure the memo values are changed when the v-if is shown again. https://play.vuejs.org/#eNp9Uk1P4zAQ/SuzvrCoJd2qu5eSov0Qh+UACLhhhEI6aU0T2/JHKIry3xnbTakQ4jbz3puZN2N37I/WWeuRzVluSyO0A4vO6zMuRaOVcdCBwQp6qIxq4IikR6dcclkqaUm7Vi+wCIrvzng8HvBSeel2xI9jKkiw18vCoTmsIC6fpMk0kxKHja5JRRlAbnUhoT0R1YKzMIyziL8zlTJEYY0NCAn30wfOYL7B1x1IWXvSYKMov4+uxoMLUp51XcT6njxQvzQzhRDjJ++ckvC7rEW5oR7DBqMFTE9323/bGSvXhVxhvEk+SYWp4ccmceZoFEpSdCDPJ/sDsDFzlg5XiVX2bJWkN+pCv9Cg0aJGc6WdoMNyNofIBK6oa/VyEbFw4PGAl2ssN5/gz3YbMM6uDVo0LXK251xhVugSfX57iVuK92Sjlr4m9RfkDVpV++Axyf56uSTbB7ro9n/8aUKu7uz51qG0w1LBaFD2Uc8Z/b5/X6z+bneW/Yx1XPZ0xccWTehJB5xlv7LpjPVvedn9Nw==

Metadata

Assignees

No one assigned

    Labels

    🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions