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

defineModel doesn't run if the same value is selected #11541

Closed
TheFlyer1983 opened this issue Aug 7, 2024 · 6 comments · Fixed by #11543
Closed

defineModel doesn't run if the same value is selected #11541

TheFlyer1983 opened this issue Aug 7, 2024 · 6 comments · Fixed by #11543

Comments

@TheFlyer1983
Copy link

Vue version

3.4.36

Link to minimal reproduction

https://shorturl.at/I2MOA

Steps to reproduce

Select an option on the button to select, and then click the same option to deselect.

Expected:
The option should de-select.

Actual:
Nothing

What is expected?

When selecting the same option twice, it should select the option then deselect the option.

What is actually happening?

When selecting the same option twice, the original click selects the option but the second click doesn't do anything.

System Info

System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M1 Pro
    Memory: 73.73 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.14.0 - ~/.nvm/versions/node/v20.14.0/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v20.14.0/bin/npm
    bun: 1.1.4 - /opt/homebrew/bin/bun
  Browsers:
    Brave Browser: 126.1.67.134
    Chrome: 127.0.6533.99
    Safari: 17.5

Any additional comments?

This worked previously on an older version of Vue: 3.4.16. Yesterday (6th August 2024) I ram npm install and it updated a patch version of Vue (3.4.36).

After that my button component stopped working correctly. I feel like this is a breaking change.

@liuseen-l
Copy link
Contributor

This seems to be as expected, because when the selected state is clicked again, the value of modelValue does not change, so the set method is not triggered.

@liuseen-l
Copy link
Contributor

liuseen-l commented Aug 7, 2024

This way you can achieve your needs:

@TheFlyer1983
Copy link
Author

TheFlyer1983 commented Aug 7, 2024

But this feels like a breaking change, because this worked in Vue 3.4.16, and was broken in a patch update between 3.4.16 and 3.4.36.

It originally worked as I expected it to work, and now has broken many instances in my application because of this change.

@edison1105
Copy link
Member

related PR

@TheFlyer1983
Copy link
Author

But surely how it used work was consistent with how set function worked in a writeable computed property?

If you select the same value via a writeable computed property it runs the set function regardless. The defineModel should really work the same way.

@liuseen-l
Copy link
Contributor

I opened a PR to solve this problem, which contains some of my own opinions. @edison1105 Do you have time to take a look? thank you🫰

@github-actions github-actions bot locked and limited conversation to collaborators Aug 22, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants