My component is designed to accept 3 arrays as props, and I need to merge them all before displaying the data. However, I am encountering TypeScript errors that are causing some issues:
<script lang="ts">
import {RisikoentitetRevision, IdentitetsmarkoerRevision, RisikomarkeringRevision} from '@/model/Risikoentitet'
import {defineComponent, computed, PropType} from 'vue'
export default defineComponent({
name: 'HistorikLogTabel',
props: {
risikoentitetRevisioner: {
type: Array as PropType<RisikoentitetRevision[]>,
required: true,
},
identitetsmarkoerRevisioner: {
type: Array as PropType<IdentitetsmarkoerRevision[][]>,
required: true,
},
risikomarkeringRevisioner: {
type: Array as PropType<RisikomarkeringRevision[][]>,
required: true,
},
},
setup(props) {
console.log({props})
const allRevisions = computed(() => {
console.log("2nd", {props})
return [
...props.risikoentitetRevisioner,
...props.identitetsmarkoerRevisioner.flat(),
...props.risikomarkeringRevisioner.flat(),
]
})
return {
allRevisions,
}
}
})
</script>
I'm struggling to identify what might be wrong with my setup. Even passing props into the computed argument hasn't resolved the issue.
EDIT:
A temporary workaround involves ignoring the TS errors, allowing the logic to function correctly. However, this solution is not ideal, and I am eager to understand the root cause of these TypeScript problems.
const allRevisions = computed(() => {
console.log("2nd", {props})
return [
// @ts-ignore
...props.risikoentitetRevisioner,
// @ts-ignore
...props.identitetsmarkoerRevisioner.flat(),
// @ts-ignore
...props.risikomarkeringRevisioner.flat(),
]
})
console.log({allRevisions})