Vue 3 passing array warning: Extraneous non-props attributes were passed to component but could not be automatically inherited

We Are Going To Discuss About Vue 3 passing array warning: Extraneous non-props attributes were passed to component but could not be automatically inherited. So lets Start this Javascript Article.

Vue 3 passing array warning: Extraneous non-props attributes were passed to component but could not be automatically inherited

How to solve Vue 3 passing array warning: Extraneous non-props attributes were passed to component but could not be automatically inherited

Well I think the error message is pretty clear.
Your ItemProperties.vue component is rendering fragments – because it is rendering multiple <div> elements using v-for. Which means there is no single root element.
At the same time, you are passing a class to the component with <ItemProperties class="infobox-item-properties"class can be placed on HTML elements only. If you place it on Vue component, Vue tries to place it on the root element of the content the component is rendering. But because the content your component is rendering has no root element, Vue does not know where to put it…
To remove the warning either remove the class="infobox-item-properties" or wrap the content of ItemProperties to a single <div>.
The mechanism described above is called Fallthrough Attributes (“Non-prop attributes” Vue 2 docs). It is good to know that this automatic inheritance can be switched off which allows you to apply those attributes by yourself on the element (or component) you choose besides the root element. This can be very useful. Most notably when designing specialized wrappers around standard HTML elements (like input or button) or some library component…

Vue 3 passing array warning: Extraneous non-props attributes were passed to component but could not be automatically inherited

Well I think the error message is pretty clear.
Your ItemProperties.vue component is rendering fragments – because it is rendering multiple <div> elements using v-for. Which means there is no single root element.
At the same time, you are passing a class to the component with <ItemProperties class="infobox-item-properties"class can be placed on HTML elements only. If you place it on Vue component, Vue tries to place it on the root element of the content the component is rendering. But because the content your component is rendering has no root element, Vue does not know where to put it…
To remove the warning either remove the class="infobox-item-properties" or wrap the content of ItemProperties to a single <div>.
The mechanism described above is called Fallthrough Attributes (“Non-prop attributes” Vue 2 docs). It is good to know that this automatic inheritance can be switched off which allows you to apply those attributes by yourself on the element (or component) you choose besides the root element. This can be very useful. Most notably when designing specialized wrappers around standard HTML elements (like input or button) or some library component…

Solution 1

Well I think the error message is pretty clear.

Your ItemProperties.vue component is rendering fragments – because it is rendering multiple <div> elements using v-for. Which means there is no single root element.

At the same time, you are passing a class to the component with <ItemProperties class="infobox-item-properties"class can be placed on HTML elements only. If you place it on Vue component, Vue tries to place it on the root element of the content the component is rendering. But because the content your component is rendering has no root element, Vue does not know where to put it…

To remove the warning either remove the class="infobox-item-properties" or wrap the content of ItemProperties to a single <div>.

The mechanism described above is called Fallthrough Attributes (“Non-prop attributes” Vue 2 docs). It is good to know that this automatic inheritance can be switched off which allows you to apply those attributes by yourself on the element (or component) you choose besides the root element. This can be very useful. Most notably when designing specialized wrappers around standard HTML elements (like input or button) or some library component…

Original Author Michal Levý Of This Content

Solution 2

The ItemProperties component has multiple root nodes because it renders a list in the root with v-for.

Based on the class name (infobox-item-properties), I think you want the class to be applied to a container element, so a simple solution is to just add that element (e.g., a div) in your component at the root:

// ItemProperties.vue
<template>
  <div>
    <section v-for="(item, index) in items" :key="index" class="box">
    ...
    </section>
  </div>
</template>

demo

Original Author tony19 Of This Content

Solution 3

You could also prevent passing down attributes in child components by doing this:

export default defineComponent({
  name: "ChildComponentName",
  inheritAttrs: false // This..
})

Source: https://vuejs.org/guide/components/attrs.html

Original Author Per Of This Content

Solution 4

You are passing a class attribute to ItemProperties without declaring it.

Declare class in props options api should solve this issue.

ItemProperties.vue

...
export default {
  props:["class"],
  ...
}

Original Author fsarter Of This Content

Conclusion

So This is all About This Tutorial. Hope This Tutorial Helped You. Thank You.

Also Read,

ittutorial team

I am an Information Technology Engineer. I have Completed my MCA And I have 4 Year Plus Experience, I am a web developer with knowledge of multiple back-end platforms Like PHP, Node.js, Python and frontend JavaScript frameworks Like Angular, React, and Vue.

Leave a Comment