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

    🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.scope: vaporrelated to vapor mode

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions