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

Two-way binding not working when using reactive, must use Ref #2805

Open
collmomo opened this issue Apr 3, 2024 · 7 comments
Open

Two-way binding not working when using reactive, must use Ref #2805

collmomo opened this issue Apr 3, 2024 · 7 comments
Labels
content Issues / PRs related to docs content

Comments

@collmomo
Copy link

collmomo commented Apr 3, 2024

Vue version

3.4.21

Link to minimal reproduction

https://play.vuejs.org/#eNp9UltPwjAU/itNX9QEIV6eyCABwoM+KBHfrDF1O2Cxa5teJsmy/+5pB0MS4W39bj3nW2s6MaZfBaBDmrncCuOJAx/MmClRGm09qYkFnntRQQ+/VqQhK6tLcoGmC6aYyrVy0SQh91CQUSe/fHu/YiobtLEYiAcPpZHcA54IyZzhakyWO+uQ1PUhp2nQGfnoi9pEkOq61AXIEaN7JaOkDNILIwFRbwMwmuLRpI0XWpFCOP4pMbTiMkQVKhYSuIPdfUQryAat+tg7npzApyfw2RGOO6QL8JANuuVpj3qHva3Eur9xWmH5dVQzmuvSCAn2OUU4RrGUNp9RLqX+eUxY3LK3x/MvyL//wTduGzFGFxYc2Ap76TjP7Rp8S8+XT7DF747EhoNE9RnyBZyWIc7YyqZBFTj2H12a9iE9IaHWr26+9aDcfqn0m1DZJD2j+JhmZ1Y/jHvXv08+phps8aMCGzOxQCT6tze0+QX3+PGQ

Steps to reproduce

link to playground

What is expected?

I expect the same outcome regardless of how the reactivity is defined.
Should be specified in the docs if this is how it's actually intended, would save hours of debugging.

What is actually happening?

2 way binding not working

System Info

No response

Any additional comments?

No response

@unbrain
Copy link

unbrain commented Apr 3, 2024

const selected = defineModel({default: []});

Starting in Vue 3.4, the recommended approach to achieve this is using the defineModel() macro:

@LinusBorg
Copy link
Member

const selected = defineModel({default: []});

Starting in Vue 3.4, the recommended approach to achieve this is using the defineModel() macro:

That has nothing to do with this issue.

@unbrain
Copy link

unbrain commented Apr 3, 2024

const selected = defineModel({default: []});

Starting in Vue 3.4, the recommended approach to achieve this is using the defineModel() macro:

That has nothing to do with this issue.

select same as checkbox
image

@edison1105
Copy link
Member

This is because reactive data reassignment loses the reactive.

image

@Doctor-wu
Copy link
Member

On my side, the template was compiled to this, and $setup was processed by shallowUnwrapHandlers, it won't be collected when it's property was access, and it seems this behavior starts in very early version, don't know if it's a bug.
CleanShot 2024-04-03 at 16 42 34@2x
CleanShot 2024-04-03 at 16 43 52@2x
CleanShot 2024-04-03 at 16 44 06@2x
CleanShot 2024-04-03 at 16 44 10@2x

@LinusBorg
Copy link
Member

I'd argue that this is expected behaviour. It's just not made explicit enough in the docs.

@yyx990803 yyx990803 transferred this issue from vuejs/core Apr 18, 2024
@bencodezen
Copy link
Member

Just to add clarification on the issue, docs should be updated to explain how v-model emits a new array (as opposed to updating an existing one) when working with <select multiple> and <input type="checkbox" multiple />.

@bencodezen bencodezen added the content Issues / PRs related to docs content label Apr 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
content Issues / PRs related to docs content
Projects
None yet
Development

No branches or pull requests

6 participants