Subscribe on changes!

Suppress "Extraneous non-props attributes (prop) were passed to component but could not be automatically inherited because component renders fragment or text root nodes."

avatar
Jan 20th 2021

What problem does this feature solve?

When conditionally rendering parent component, but still want to keep the children elements, I found the new fragment pattern could meet this need. When deliberately render fragment, I don't want vue to warn the extra props being passed since they might be used by custom-component. I don't know if there's a better way to achieve this.

<template>
  <component :is="condition ? 'custom-component' : 'v-fragment'" prop="prop">
    ...
  </component>
</template>

VFragment.vue

<template>
  <slot></slot>
</template>

What does the proposed API look like?

Something like fragmentWarning: false, sorry, can't come up with a better one.

avatar
Jan 20th 2021

Using inheritAttrs: false should suppress the warning:

https://jsfiddle.net/skirtle/637y4au8/

Does that cover your use case?

avatar
Jan 20th 2021

Yes, forgot the good old inheritAttrs, thanks!