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

[BUG]: withDefaults Fails When Using Function Declarations With Props #12822

Open
SFM61319 opened this issue Feb 7, 2025 · 0 comments · May be fixed by #12823
Open

[BUG]: withDefaults Fails When Using Function Declarations With Props #12822

SFM61319 opened this issue Feb 7, 2025 · 0 comments · May be fixed by #12823
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. has workaround A workaround has been found to avoid the problem scope: sfc

Comments

@SFM61319
Copy link

SFM61319 commented Feb 7, 2025

Vue version

3.4.15

Link to minimal reproduction

https://play.vuejs.org/#eNqFUslOwzAQ/ZWRL7RSlVDBKaStWCWQgAo4+pKmkzYlsS3b6aIq/87YaUKRgN7secs8z3jPrpUK1hWyiMUm1bmyYNBWCopELEacWcPZmIu8VFJbuJWlgkzLEs6C0F2c9OyKizhsxESli8VSFYlFugHEXhTNEk12Q84gpHIcHnHYgNqkUmT5IlgZKSjL3ik5S0maF6hflc2loCgReMRhSVHIzZOvWV3hoK2nS0w/f6mvzNbVOJtqNKjXyFmH2UQv0Dbw/fsLbuncgaWcVwWx/wHf0Miichkb2k0l5hT7iOfTPvop5mLxYe63FoVpH+WCOmbt+ZzRVN3U/nr6d9yL4NLruKhpiu1GTizT7hTC826qpTIwamwzKScRiKqcoaZ9AtC+jgvUgQvakbGgDrpNbpd3mCVVYU1vjlku0FvGB+txrz/ozCPoeV0fRuP2IZqyadH4BdQPJhM4982bOVDppIysnWzYyer+ie+4HI4fXJ79/siiruOQgJZw4zp3BBetI/z8ufUXUsMTpg==

Steps to reproduce

Change the default props factories to use object function declaration syntax and notice the output vanishing due to the error thrown.

Working code

const props = withDefaults(defineProps<MyProps>(), {
  foo: (props) => {
    return props.bar ?? 0;
  },
  bar: (props) => {
    return props.foo ?? 0;
  },
});

Breaking code

const props = withDefaults(defineProps<MyProps>(), {
  foo(props) {
    return props.bar ?? 0;
  },
  bar(props) {
    return props.foo ?? 0;
  },
});

What is expected?

Default prop value resolution with props arg to work as usual irrespective of the function syntax used.

What is actually happening?

Default prop value resolution with props arg is not working when using the object function syntax, it only works when arrow function syntax is used.

System Info

System:
  OS: Linux 6.12 Arch Linux
  CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-12450H
  Memory: 1.60 GB / 15.33 GB
  Container: Yes
  Shell: 5.2.37 - /usr/bin/bash
Binaries:
  Node: 18.20.4 - /run/user/1000/fnm_multishells/99919_1738935943852/bin/node
  npm: 10.9.0 - /run/user/1000/fnm_multishells/99919_1738935943852/bin/npm
npmPackages:
  vue: ^3.4.15 => 3.4.20

Any additional comments?

I also noticed that the passed props argument's state is persisting across default props factories, possibly in the order defined. In the playground example, if foo alone is passed, bar is being set to foo's value as expected, but when bar alone is passed instead, foo is not being set to bar's value. I am not sure if this is intended behavior, considering that one can fairly assume that the props arg passed to the default props factories contains only the original props passed by the user and is not mutated by default factories defined before the current factory. And the lack of dedicated docs for withDefaults makes it harder to understand.

@edison1105 edison1105 added scope: sfc has workaround A workaround has been found to avoid the problem 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels Feb 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. has workaround A workaround has been found to avoid the problem scope: sfc
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants