Skip to content

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

Open
@lejunyang

Description

@lejunyang

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

Metadata

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.scope: custom elements

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions