Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Wrong value type in initial render bacause of attribute reflection from vue custom element #12854

Open
lejunyang opened this issue Feb 11, 2025 · 0 comments · May be fixed by #12855
Open

Wrong value type in initial render bacause of attribute reflection from vue custom element #12854

lejunyang opened this issue Feb 11, 2025 · 0 comments · May be fixed by #12855
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. scope: custom elements

Comments

@lejunyang
Copy link

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNq9VF1v2jAU/Su31qQkUgaC7YkRtLXiYXvopnVv86RCuIG0iW3ZDqNC+e+7sQOkrJT2pS+Q63N87re37ItSvXWFbMTGJtW5smDQVmrCRV4qqS1sQWMGNWRalhAQNfjUwVYnkQVmucCrylhZTgssUdhHXC64SKUwFq5kqQaQPHUj3HIBoLRUZgTuG2A9Kyokq44b2/9qFAvUYbTjaMpBC1iFwSJfBzHctpfebe0qNz1n1THYB+UP6V9m0MFuI8qF1Lmoo8eRDl8fqbegdff7uirnqGO4sToXyxgupSxwJv64TJzPN0srz8KLtJuG6S3RhkH58N6isUHUuj7i+PwPtNj3kCRJ+azq8IWyw1Z3uNP1TRCufNQFmstwEMUwp/q1ptUVEtsTrVwuCySECphMvEcKra2Kl/F1gSRJIPAnQXQEQTCgYQXAwuAxNGiAxv/+5OJguajHfb9WtFBkWCxVMbNIFsC4zRNGjp5w5tU5g/4JQiP+DOyc/4cPzzroMM4pdF04yryyVgr4nBZ5ek8EX3XOJv6Dxn/rBnJfcqjrcd/fIo1xv1MTFjNrqHlZvuzdGSnoVXJd4yylOcgL1N+Vzam5nO3XirNZUci/39xZ0/92jejOCtP7J87vzKY54+yHRoN6TcHuMTvTNKoent5c44a+92ApF1WT2jPgTzSyqJoYPe2yEgsKu8Nz0X51ryRt/y8z3VgUZpdUE+hh/zmjl7JZgVOpH8L90Pu422xW/wN8IPde

Steps to reproduce

  • Observe the initial render result in preview, we can see for number value and boolean true, they are actuall strings

Image

  • click toggle for several times, we can see later results are correct

What is expected?

value type should be as it is

What is actually happening?

I know if I use type: Number for props, vue will transform them into number, but if it's a mixed types(or no type definition) like below, vue will not do the transform, that is useful if we want to use the props as they actually are

props: {
  value: {},
},
props: {
  value: {
    type: [Number, String, Boolean],
  }
},

In initial render, primitive values are reflected into attributes because of below code

this._resolveProps(this._def)
this._setProp(key, val, true, true)

that happens in constructor, but later in _resolveDef, attributes are used again in this._setAttr and then cause this issue

System Info

Any additional comments?

No response

@edison1105 edison1105 added 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. scope: custom elements labels Feb 11, 2025
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. scope: custom elements
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants