78

please, I'm learning a VueJS 3 and I have probably begineer problem. I have warn in browser developer console like this one:

enter image description here

The Message is:

[Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

I'm passing array of objects to the child Component. In my parent views/Home.vue compoment I have this implemenation:

<template>
  <div class="wrapper">
    <section v-for="(item, index) in items" :key="index" class="box">
      <ItemProperties class="infobox-item-properties" :info="item.properties" />
    </section>
  </div>
</template>
<script>
import { ref } from 'vue'
import { data } from '@/data.js'
import ItemProperties from '@/components/ItemProperties.vue'

export default {
  components: {
    ItemDescription,
  },
  setup() {
    const items = ref(data)

    return {
      items,
    }
  },
</script>

In child compoment components/ItemProperties.vue I have this code:

<template>
  <div class="infobox-item-property" v-for="(object, index) in info" :key="index">
    <span class="infobox-item-title">{{ object.name }}:</span>
    <span v-if="object.type === 'rating'">
      <span v-for="(v, k) in object.value" :key="k">{{ object.icon }}</span>
    </span>
    <span v-else>
      <span>{{ object.value }}</span>
    </span>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Array,
      required: false,
      default: () => [
        {
          name: '',
          value: '',
          type: 'string',
          icon: '',
        },
      ],
    },
  },
}
</script>

It doesn't matter if I have default() function or not. Also doesn't matter if I have v-if condition or not. If I have cycle in the Array, I got this warning

Data are in data.js file. The part of file is here:

export const data = [
  {
    title: 'White shirt',
    properties: [
      { name: 'Material', value: 'Cotton', type: 'string', icon: '' },
      { name: 'Size', value: 'M', type: 'string', icon: '' },
      { name: 'Count', value: 4, type: 'number', icon: '' },
      { name: 'Absorption', value: 4, type: 'rating', icon: '💧' },
      { name: 'Rating', value: 2, type: 'rating', icon: '⭐️' },
      { name: 'Confort', value: 2, type: 'rating', icon: '🛏' },
      { name: 'Sleeves', value: 'Short', type: 'string', icon: '' },
      { name: 'Color', value: 'White', type: 'string', icon: '' },
    ],
  },
]

PS: Application works but I'm afraid about that warning. What can I do please like right way?

I will be glad for any advice. Thank you very much.

1
  • Not an answer to your case, but to the same error message in another case. Here I had used a : instead of a @ for the event handling in the parent component Feb 22 at 12:56

8 Answers 8

101

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 (doing so also eliminates the error message).

This can be very useful. Most notably when designing specialized wrappers around standard HTML elements (like input or button) or some library component - you can tell "This is a button - you can put anything that standard <button> accepts and it will work" without redefining all standard <button> attributes as props of your wrapper

4
  • Inheritance is a base feature of programming. So I get it, but find this to be such a magic feature. This is what causes bugs, turning inheritance on by default. Let's just let everything fallthrough, seems powerful but dangerous Dec 16, 2022 at 14:15
  • Is this something that was allowed in v2 but not in v3? I didn't start getting this error until migrating from v2 to v3.
    – tcrite
    Apr 2 at 15:06
  • 1
    @tcrite Described situation wasn't even possible in Vue 2 because in Vue 2 there was a rule that component must render single root element. So this is actually new problem because Vue 3 allows to render multiple root elements (so called fragments) Apr 2 at 21:28
  • 1
    You can also use v-bind="$attrs" to solve this situation. vuejs.org/guide/components/… May 18 at 12:45
14

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

1
10

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

0
3

Michael answer is correct, but many people still fall for this error as it is triggered by some extra scenarios (edge cases) that are not covered by the documentation or not very intuitive.

The problem Just to recap, the error is triggered because we are passing an attribute (eg. disabled) and the vue component we are planning to render has 2 or more elements in its root. (this is well explained by Michael).

The edge cases:

  • This error is also triggered if you have an if/else statement
  • This error is also triggered if you have a comment alongside your root element
  • If you use teleport or transition, the root element is the actual HTML element used (so if you have 2 elements in a teleport or transition block this error will trigger).

I have covered this error in details here: https://zelig880.com/how-to-solve-extraneous-non-props-attributes-in-vue-js

2

This could also be triggered from parent components that have props: true in their route definition. Make sure that you add props: true only in the components that you actually need it and have some route params as props.

2
  • This was the issue in my case, although props were being passed down from a parent route config, i.e. thing/:thing_id/foo/:foo_id), and my route only needed :foo_id but I had to specify :thing_id even though I didn't need it.
    – chipit24
    Nov 28, 2022 at 20:13
  • yeah, the same issue for me, when passing one param from parent route to nested route, I have to declare the param which is not used in parent route component to avoid this waring
    – Jack
    Dec 10, 2022 at 7:46
0

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"],
  ...
}
0

You can add defineProps to the script setup code, to get rid of this warning:

const props = defineProps(['class'])
0

Another way to avoid this warning is by adding the class dynamically, like this:

<my-awesome-component 
    ref="myComponentEl"
/>

...

myComponentEl.classList.add('awesome-class');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.