在 Vuetify 中，如何在每一行中添加一个按钮<v-data-table> ?</v-data-table>

Question

The screenshot belwo is an example in https://vuetifyjs.com/en/components/data-tables/ And its code is:

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
  ></v-data-table>
</template>

I am wondering how to add a <v-btn> into each row to navigate to another component?
Like, adding a column which contains buttons called "view" in each row, and clicking on them will navigate to the page containing the details of the corresponding dessert.

Thanks!

Answer 1

You can add a header called action .

  { text: "", value: "action" }

And then specify the rendering of this header with a slot .

<v-data-table :headers="headers" :items="desserts">
  <template v-slot:item.action="{ item }">
    <v-btn>OPEN</v-btn>
  </template>
</v-data-table>

https://vuetifyjs.com/en/components/data-tables/#simple-checkbox