In simplifying the component I aim to create, I have created the following code structure:
// MyComp.vue
<script setup lang="ts">
import { PropType, defineProps, defineEmits } from 'vue';
const props = defineProps({
modelValue: {
type: Array as PropType<unknown[]>,
required: true,
},
});
const emit = defineEmits({
updateModelValue: (value: unknown[]) => true,
});
</script>
<template>
<div v-for="(item, index) in modelValue" :key="index">
<slot :item="item" :index="index"></slot>
</div>
</template>
// Parent.vue
<script setup lang="ts">
import { ref } from 'vue'
import { MyComp } from '.';
const myArray = ref([
{
name: 'A',
id: 1,
},
{
name: 'B',
id: 2,
},
]);
</script>
<template>
<div>
<MyComp v-model="myArray">
<template #default="{ item }">
<!-- item is of type unknown - type not inferred :( -->
<div>{{ item }} </div>
</template>
</MyComp >
</div>
</template>
The issue lies in the fact that the type of item does not get inferred, resulting in a lack of IntelliSense support.
How can this be resolved effectively?
(Additional details were added to comply with StackOverflow requirements)