Vue - button is not visible inside v-data-table

Question

I have a problem with v-data-table. I want to add button for edit, delete and add new product to my v-data-table. Data comes from my rest api and is assign via my getter CARS to v-data-table. Everything is fine and every single row is displayed but button is not shown.... I tried a lot of different approaches but it still doesn't work.. I would be grateful if You help me. Best regards!

Here is my code.

<v-data-table
    v-model="selected"
  :headers="headers"
  :items=CARS
  :single-select="singleSelect"
   item-key="id"
    show-select class="elevation-1" 
>
  <template slot="items" slot-scope="props">


      <td>{{ props.item.id }}</td>
      <td>{{ props.item.vin }}</td>
      <td>{{ props.item.register_number}}</td>
      <td>{{ props.item.cost}}</td>
      <td>{{ props.item.latitude }}</td>
      <td>{{ props.item.longitude}}</td>
      <td>{{ props.item.service}}</td>
      <td>{{ props.item.reservation}}</td>
       <td class="justify-content-left layout">
      <v-btn icon @click.prevent="editUser(props.item)">
         <v-icon color="blue">edit</v-icon>
      </v-btn>
      </td>
  </template>
</v-data-table>

When I place v-btn under then I can see him. So it must be imported I think — Snooze Snoze, Dec 11 '19 at 16:43
then i'd recommend to make another component instead of using another template. — jemiloii, Dec 11 '19 at 16:58
Does this answer your question? [Vuetify insert action button in data-table and get row data](https://stackoverflow.com/questions/59081299/vuetify-insert-action-button-in-data-table-and-get-row-data) — Michal Levý, Dec 11 '19 at 17:00
I think you are using old version of Vuetify. Please update your Vue and Vuetify version and try like this example. [v-data-table crud actions](https://codepen.io/pen/?&editable=true&editors=101) — Kadir Alan, Mar 14 '20 at 20:47

Vue - button is not visible inside v-data-table

0 Answers0