OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

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

  • Thread starter Thread starter Bambi Bunny
  • Start date Start date
B

Bambi Bunny

Guest
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:

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.

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

Code:
<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:

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:

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: '' },
    ],
  },
]

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.

<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.sstatic.net/5eo6r.png" rel="noreferrer"><img src="https://i.sstatic.net/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><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>
</code></pre>
<p>In child compoment <code>components/ItemProperties.vue</code> I have this code:</p>
<pre class="lang-html prettyprint-override"><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>
</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>
 

Latest posts

M
Replies
0
Views
1
Meliodas Dragon
M
Top