title: Vue 3 passing array warning: Extraneous non-props attributes were passed to component but could not be automatically inherited
body: <p>please, I'm learning a VueJS 3 and I have probably begineer problem. I have warn in browser developer console like this one:</p>
  <p><a href="https://i.stack.imgur.com/5eo6r.png" rel="noreferrer"><img src="https://i.stack.imgur.com/5eo6r.png" alt="enter image description here" /></a></p>
  <p>The Message is:</p>
  <pre><code>[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.
  </code></pre>
  <p>I'm passing array of objects to the child Component. In my parent <code>views/Home.vue</code> compoment I have this implemenation:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div class=&quot;wrapper&quot;&gt;
      &lt;section v-for=&quot;(item, index) in items&quot; :key=&quot;index&quot; class=&quot;box&quot;&gt;
        &lt;ItemProperties class=&quot;infobox-item-properties&quot; :info=&quot;item.properties&quot; /&gt;
      &lt;/section&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  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,
      }
    },
  &lt;/script&gt;
  </code></pre>
  <p>In child compoment <code>components/ItemProperties.vue</code> I have this code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div class=&quot;infobox-item-property&quot; v-for=&quot;(object, index) in info&quot; :key=&quot;index&quot;&gt;
      &lt;span class=&quot;infobox-item-title&quot;&gt;{{ object.name }}:&lt;/span&gt;
      &lt;span v-if=&quot;object.type === 'rating'&quot;&gt;
        &lt;span v-for=&quot;(v, k) in object.value&quot; :key=&quot;k&quot;&gt;{{ object.icon }}&lt;/span&gt;
      &lt;/span&gt;
      &lt;span v-else&gt;
        &lt;span&gt;{{ object.value }}&lt;/span&gt;
      &lt;/span&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    props: {
      info: {
        type: Array,
        required: false,
        default: () =&gt; [
          {
            name: '',
            value: '',
            type: 'string',
            icon: '',
          },
        ],
      },
    },
  }
  &lt;/script&gt;
  </code></pre>
  <p>It doesn't matter if I have <code>default()</code> function or not. Also doesn't matter if I have <code>v-if</code> condition or not. If I have cycle in the Array, I got this warning</p>
  <p>Data are in <code>data.js</code> file. The part of file is here:</p>
  <pre class="lang-js prettyprint-override"><code>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: '' },
      ],
    },
  ]
  </code></pre>
  <p>PS: Application works but I'm afraid about that warning. What can I do please like right way?</p>
  <p>I will be glad for any advice. Thank you very much.</p>