when trying to use a component named CardRenderer.vue.js which renders card using array of Objects. when using the same component again & again to render the data. when having this error “[vue.js warn]: Invalid prop: type check failed for prop “renderData” when I tried passing prop from component.
I tried passing different values and different types but it did’nt work.
Here is the code:
CardRenderer.vue
<template lang=”html”>
<div>
<b-container class=”bv-example-row”>
<b-row v-for=”(row, i) of rows” v-bind:key=”i”>
<b-col v-for=”(item, j) of row” v-bind:key=”j” >
<!– you card –>
<b-card
:title=”item.title”
img-src=”item.icon”
img-alt=”Image”
img-top
tag=”article”
style=”max-width: 20rem;”
class=”mb-2”
\>
<b-card-text>
<h1>{item.name}</h1>
<pre>{item.description}</pre>
</b-card-text>
<b-button :href=”‘/dashboard/‘+item.name” variant=”primary”>More</b-button>
</b-card>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script lang=”js”>
export default {
name: ‘CardRenderer’,
props: {
renderData: []
},
data() {
return {
rows: null
}
},
mounted() {
const itemsPerRow = 3
let rowss = []
let arr = this.renderData
// eslint-disable-next-line
// console.log(this.renderData)
for (let i = 0; i < arr.length; i += itemsPerRow){
let row = []
for (let z = 0; z < itemsPerRow; z++) {
row.push(arr[z])
}
rowss.push(row)
}
this.rows = rowss
// eslint-disable-next-line
console.log(this.rows)
},
methods: {
},
computed: {
// rows() {
// }
}
}
</script>
<style scoped>
</style>
CardGrouper.vue:
<template lang=”html”>
<div class = “full” >
<div class=”h-50” style=” background-color: #C8544F”>
<h1 align=”center”>{$store.getters.responseAPI.title} </h1>
<CardRenderer :renderData=this.$store.getters.responseAPI.apps />
</div>
</div>
</template>
<script>
import CardRenderer from “./CardRenderer.vue”
/* eslint-disable */
export default {
name: ‘CardGrouper’,
components: {
CardRenderer
},
props: [],
mounted() {
},
data() {
return {
}
},
methods: {
},
computed: {
}
}
</script>
<style scoped >
.full{
width: 100vw;
height: 90vh;
background: linear-gradient(to bottom, Red 30%, white 50%);
}
</style>
Something.vue
<template lang=”html”>
<!– <h1>Something</h1> –>
<CardRenderer :renderData=valObj />
</template>
<script lang=”js”>
import CardRenderer from ‘./CardRenderer’
export default {
name: ‘something’,
components: {
CardRenderer
},
props: [],
data() {
return {
valObj: []
}
},
mounted() {
let key = this.findUrl()
let value = this.$store.getters.responseAPI.apps.filter((elem) => {
if(elem.name == key) return elem.apps
})
if (value.length > 0)
this.valObj = value[0].apps
//eslint-disable-next-line
console.log(this.valObj)
},
methods: {
findUrl() {
let url = window.location.pathname.split(“/“).slice(-1)[0];
return url
}
},
computed: {
}
}
</script>
<style scoped >
.something {
}
</style>
when having this error.
It looks like this.
This is the data when passing as a prop from Something.vue
This is how value looks like
Error is being generated somewhere from Something.vue.
when passing array of objects as a prop.
How do i rectify this error, to make it work.
Solution :
Set the renderData type as Array and default value to []:
props: {
renderData: {
type: Array,
deafult: () => []
}
}
Solution 2:
It appears that you are defining the renderData prop as an array [] but probably are passing an object to it or something.
Either simplify it and do…
props: [‘renderData’]
Or if you are passing an object to it do..
props: {
renderData: {
type: Object,
}
}
If it is an array of objects do..
props: {
renderData: {
type: Array,
default: () => [{}];
}
