How about creating a new list component that can work with an array of objects?
<script setup lang="ts">
const props = defineProps<{
items: Record<string, unknown>[],
selected: Record<string, unknown> | null
field: string
}>()
const emit = defineEmits<{
(e: 'update:selected', value: Record<string, unknown> | null): void
}>()
</script>
<template>
<div v-for="(item,idx) in items" :key="idx">
<div
@click="emit('update:selected',item)"
style="cursor: pointer">
{{ item[field] }}
</div>
</div>
</template>
Let's test it out using a list of employees.
<script setup lang='ts'>
import MyList from './MyList.vue'
import {Ref, ref} from "vue";
interface Employee {
name: string;
age: number;
}
const employees: Employee[] = [
{name: 'Mike', age: 34},
{name: 'Kate', age: 19},
{name: 'Den', age: 54},
]
const selectedEmployee=ref<Employee | null>(null)
</script>
<template>
Age: {{selectedEmployee?selectedEmployee.age:'not selected'}}
<MyList :items="employees" v-model:selected="selectedEmployee" field="name"/>
</template>
So far everything seems to be functioning well. However, during a build process, there is an error TS2322: “Type 'Employee' is not assignable to type 'Record<string, unknown>'". An update with a generic component might be the solution, but it's not available yet. What would be the best approach to resolve this issue? vue playground