Skip to content

[Vapor] The prop is of Vapor components does not support dynamic binding via v-bind #14488

@l246804

Description

@l246804

Vue version

3.6.0-beta.7

Link to minimal reproduction

https://play.vuejs.org/#eNp9klFLwzAQx79KyEsdzFaYKIxuoHMP+qBDfQxI7a5dZpqEJO0Gpd/dS+pmFd1Tm///7vLL3bX0Ruu4qYFOaWpzw7UjTaaVIRZcrYnIZDlj1FlG50zyCh1HFqrSpDCqIlGc+IMvEDGZJn0FjMSDg0qLzAGeCElDzpRbLBatMgPSRYySZGAGr7e+nDQZ1KBjpMiVLHgZb62SCNz6ZEZzzOYCzJN2XEkknZLgeC8TQu0eguZMDeODnm8g//hD39q91xDEgAXTAKNHz2WmBGTz9vLlEfb4fzQrta4FRp8wn8EqUXvGPuy2lmvEHsQF2vvQZC7LV7vcO5D28CgP6iO7EM8oNt037r+nf+NO4suQx2SHXTwMbDDxftb93H9OHBtuHdFGaUtmZMfd5g6KrBbOnq2h4BJW3krDpdxOiXUGyfGi+dlo3LN4OVpsuFjjinSj02uiw4eQtuW2Q2CUEq/9XoW3BoxvDD5iEl/FF+fv4LL4mnaftPTu1Q==

Steps to reproduce

  1. Define the prop for the Vapor component and use it in the template
// Child.vue
withDefaults(defineProps<{
  is: string
}>(), {
  is: 'Child'
})
<template>
  <div>{{ is }}</div>
</template>
  1. Use the Vapor component in the parent component and pass :is="'Parent'" via v-bind

  2. At this point, the page displays Child and a warning is shown indicating that a required prop is missing. The v-bind passing method is supported in VDOM mode.

What is expected?

  1. When passing the is prop to a Vapor component via v-bind (e.g., :is="'Parent'"), the component should correctly receive and render the dynamically bound value (Parent), instead of falling back to the default value (Child).
  2. No false warning about a "required prop missing" should be thrown when the is prop is passed via v-bind (consistent with the behavior in VDOM mode).

What is actually happening?

  1. When passing the is prop to the Vapor component via v-bind (i.e., :is="'Parent'"), the component does not receive the dynamically bound value Parent — instead, it renders the default value Child (defined via withDefaults).
  2. A false warning is thrown in the console indicating that the required is prop is missing, even though the prop is explicitly passed via v-bind.
  3. This behavior is inconsistent with VDOM mode (where v-bind for the is prop works as expected, with no false warnings).

System Info

Any additional comments?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions