Para crear una tabla, quiero usar JSON adicional - "tdTyp". Sin tabla de datos , creé una tabla similar usando v-for y todo funcionó:
<td>{{ td.status }}</td> <td>{{ $data.tdTyp[td.typ - 1].bezeichnung }}</td>Con la fila "Tipo":
<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')Funciona bien:
{ text: 'Typ', value: 'typ' } // 1,2,3,4...Y también quiero agregar iconos:
{ text: 'Status', value: '(status === 1) ? <img src="#" /> : ""' } //status - 0 or 1Soy nuevo en JS. ¿Quizás se necesita un procesamiento posterior de esta tabla aquí o una matriz de procesamiento previo de JSON?
Para el componente <v-data-table> sería mejor usar item.* slots .
Por lo tanto, de acuerdo con sus datos, debe anular las #item.status y #item.typ .
También hice que los headers de los campos fueran estáticos en lugar de computados y agregué el método getTyp para sortear el error Cannot read properties of undefined... .
El código debe ser similar a:
<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 '-'; } } }