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