Here is the issue at hand. Main view:
<template>
<div class="main">
<Grid :rows=3 :cols=4>
<GridItem :x=1 :y=1 />
<GridItem :x=2 :y=1 />
</Grid>
</div>
</template>
<script>
import Grid from '@/components/Grid'
import GridItem from '@/components/GridItem'
export default {
name: 'Main',
components: {
Grid,
GridItem
}
}
</script>
Container component - Grid:
<template>
<div class="container">
<slot v-bind="testData"></slot>
</div>
</template>
<script>
export default {
name: 'Container',
data() {
return {
testData: 'example'
}
},
props: {
rows: Number,
cols: Number
}
}
</script>
Lastly, grid item component:
<template v-slot="slotProps">
<div class="item">
{{x}} {{y}} {{slotProps.testData}}
</div>
</template>
<script>
export default {
name: 'Item',
props: {
x: Number,
y: Number
}
}
</script>
Encountered error: GridItem.vue Uncaught (in promise) TypeError: Cannot read property 'testData' of undefined. Struggling to identify the issue. Assistance would be greatly appreciated. Thank you for your time.