How can I use v-html in customized default rows in the table using Vuetify 2.x?

Question

I am starting to use Vuetify 2.x.

I have a table and some column should be shown with html.

So I used below code:

        <v-data-table
          :headers="headers"
          :items="decorations"
          :items-per-page-options="[20]"
          class="elevation-1"
        >
          <template v-slot:items="props">
            <tr>
              <td class="text-sm-center">{{ props.item.name}}</td>
              <td><span v-html="props.item.desc"></span></td>
            </tr>
          </template>
        </v-data-table>

But from Vuetify 2.0, table has been changed.

        <v-data-table
          :headers="headers"
          :items="decorations"
          :items-per-page-options="[20]"
          class="elevation-1"
        >
        </v-data-table>

Not used "template" any more. So I don't know how can I apply "v-html" in some column.

Answer 1

based on this example you could do it like :

  <v-data-table
          :headers="headers"
          :items="decorations"
          :items-per-page-options="[20]"
          class="elevation-1"
        >
 <template v-slot:item.desc="{ item }">
       <span v-html="props.item.desc"></span>
    </template>
        </v-data-table>