headers in data-table(icons and few JSON )

Question

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?

Could you append your question with the structure of JSON? And I'm not clearly understand, do you use `v-data-table` component or not? — Alexander Shkirkov, Jan 10 '22 at 04:06
@dreamwalker yes v-data-table. I added JSON structure, for example and code from my nuxt app. — Евгений Гедройц, Jan 10 '22 at 05:59

score 1 · Accepted Answer · answered Jan 10 '22 at 06:35

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.

Thank you very much! It works of all and with other rows! But ES Linter error: 'v-slot' directive doesn't support any modifier vue/valid-v-slot. I disabled linter — Евгений Гедройц, Jan 10 '22 at 07:32
Maybe [this thread](https://stackoverflow.com/questions/61344980) will help you to set up a linter — Alexander Shkirkov, Jan 10 '22 at 07:47

headers in data-table(icons and few JSON )

1 Answers1