To create a table, I want to use additional JSON - "tdTyp". Without data-table, I created a similar table using v-for and everything worked:
<td>{{ td.status }}</td>
<td>{{ $data.tdTyp[td.typ - 1].bezeichnung }}</td>
With the row "Typ":
<v-data-table
:headers="headers"
:items="tdData"
:search="search"
></v-data-table>
export default {
data () {
return {
tdData: resTdData,
tdTyp: resTdTyp
}
},
computed: {
headers () {
return [
{ text: 'Status', value: 'status' },
{ text: 'Typ', value: `${this.tdTyp['typ' - 1].bezeichnung}` }, // 'typ' is number. I need for example: { text: 'Typ', value: this.tdTyp[0].bezeichnung }
]}
}
}
resTdTyp JSON:
[{"bezeichnung": "Gesetz", "id": 1}, {"bezeichnung": "Verordnung", "id": 2}]
resTdData JSON:
[{"status": 1, "text": "text", "typ": 1}, {"status": 0, "text": "text", "typ": 4}]
Error:
Cannot read properties of undefined (reading 'bezeichnung')
It works fine:
{ text: 'Typ', value: 'typ' } // 1,2,3,4...
And also i want to add icons:
{ text: 'Status', value: '(status === 1) ? <img src="#" /> : ""' } //status - 0 or 1
I'm new in JS. Perhaps post-processing of this table is needed here or pre-processing array from JSON?
For <v-data-table> component it would be better to use item.* slots.
So, according to your data, you need to override #item.status and #item.typ slots.
I also made the field headers static instead of computed and added getTyp method to get around your Cannot read properties of undefined... error.
The code should be similar to:
<v-data-table
:headers="headers"
:items="tdData"
>
<template #item.status="props">
<td>
<img v-if="props.item.status === 1"
src="https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-dark.svg"
height="30"
/>
</td>
</template>
<template #item.typ="props">
<td>
{{ getTyp(props.item.typ) }}
</td>
</template>
</v-data-table>
...
data() {
return {
headers: [
{ text: 'Status', value: 'status' },
{ text: 'Typ', value: 'typ'}
],
tdData: resTdData,
tdTyp: resTdTyp
}
},
methods: {
getTyp(typId) {
if (this.tdTyp[typId - 1] !== undefined) {
return this.tdTyp[typId - 1].bezeichnung;
} else {
return '-';
}
}
}
I created an example with static data at CodePen.