[SOLVED] How to transform an array of strings into badges in a table?

[wpq]

I am displaying in a table data such as (this is one row of data):

{
  "filename": "ddef909f9028451383bcfa369daea985",
  "modified": "2021-02-28T15:50:10.512474+01:00",
  "serial": 2,
  "tags": [
    "tag1",
    "tag2"
  ],
  "title": "second title"
}

I created the table from title and tags but I would like the content of tags to be displayed as badges. I tried this in the columns definition:

   {
      title: 'tags',
      label: 'Tags',
      name: 'tags',
      field: 'tags',
      align: 'left',
      format: (val, row) => {val.forEach(tag => `<q-badge color="blue" class="q-ma-xs" label="${tag}"></q-badge>`)}
   }

This unfortunately does not display any tags.

What would be the proper way to break this array of tags into several q-badge?

[s.molinari]

You’re probably better off using the body slot.

https://quasar.dev/vue-components/table#Body-slots

Scott

[wpq]

Thank you @s-molinari , that was a great idea:

<q-table class="q-pa-md"
               title="Notes"
               :data="allNotes"
               :columns="columns"
               row-key="filename"
               @row-click="displayNote"
      >
        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td key="title" :props="props">
              {{ props.row.title }}
            </q-td>
            <q-td key="tags" :props="props">
              <span v-for="tag in props.row.tags"><q-badge color="blue" class="q-ma-sm">{{tag}}</q-badge></span>
            </q-td>
          </q-tr>
        </template>
      </q-table>