Vuetify - в v-data-table я хочу использовать tbody и добавлять другой компонент в каждую строку

Question

Я использовал v-data-table в Vuetify. js framework, и мне нужно добавить какую-то кнопку и textfield в v-data-table. V-data-table действительно полезен, но мне очень сложно добавлять другие компоненты. Это мой первый эксперимент, но он не сработал. Я хочу добавить v-btn в каждую строку. но "произошла ошибка". сообщение об ошибке находится под моим кодом.

Кто-нибудь мне посоветует?

    <template>
    <div>
        <v-data-table
         dense
         :headers="header"
         :items="items"
         class="elevation-1"
         >
         <template v-slot:body="{ items}">
             <tbody>
                 <tr v-for="item in items" :key="item.email">
                     <td>{{item.name}}</td>
                     <td>{{item.email}}</td>
                     <td><v-btn @click="deleteRow(item)">delete</v-btn></td>
                 </tr>
             </tbody>
         </template>
        </v-data-table>
    </div>
</template>

<script lang="ts">
import {Component, Vue} from 'nuxt-property-decorator'
import axios from 'axios'

@Component({})
export default class extends Vue{
    header = [
        {text:'name',value:'name'},
        {text:'email',value:'email'},
        {text:'Actions',value:'actions',sortable:false}
    ]
    items:any=[]
    deleteRow(index:any){
       let item=this.items.findIndex((it:any)=>it.email===item.email)
        this.items.splice(index,1);
    }
    async mounted(){
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        this.items = response.data.map((item:any)=>({
            name:item.name,
            email:item.email
        }));
    }
    
}
</script>

[сообщение об ошибке]

TypeError: Невозможно прочитать свойство 'email' неопределенного в eval (axiostest4. vue? eedd: 35) ....

Answer 1

Попробуйте использовать <template v-slot:item.actions="{ item }"> для доступа к текущему элементу (строке)

 <v-data-table
         dense
         :headers="header"
         :items="items"
         class="elevation-1"
         >
        <template v-slot:item.actions="{ item}">
             <v-btn @click="deleteRow(item )">delete</v-btn>
       </template>
        </v-data-table>

метод:

 deleteRow(item:any){
      let index=this.items.findIndex(it=>it.email===item.email)
        this.items.splice(index,1);
    }

заголовки:

  header = [
        {text:'name',value:'name'},
        {text:'email',value:'email'},
       ,
      {
        text: 'Actions',
        value: 'actions',
        sortable: false
      },
    ]

остальные поля отображаются автоматически

var app = new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    employees: [{
        "id": "1",
        "employee_name": "Tiger Nixon",
        "employee_salary": "320800",
        "employee_age": "61",
        "profile_image": ""
      },
      {
        "id": "2",
        "employee_name": "Garrett Winters",
        "employee_salary": "170750",
        "employee_age": "63",
        "profile_image": ""
      },
      {
        "id": "3",
        "employee_name": "Ashton Cox",
        "employee_salary": "86000",
        "employee_age": "66",
        "profile_image": ""
      },
      {
        "id": "4",
        "employee_name": "Cedric Kelly",
        "employee_salary": "433060",
        "employee_age": "22",
        "profile_image": ""
      },
      {
        "id": "5",
        "employee_name": "Airi Satou",
        "employee_salary": "162700",
        "employee_age": "33",
        "profile_image": ""
      },
      {
        "id": "6",
        "employee_name": "Brielle Williamson",
        "employee_salary": "372000",
        "employee_age": "61",
        "profile_image": ""
      }
    ],
    headers: [{
        text: 'ID',
        value: 'id'
      },

      {
        text: 'employee name',
        value: 'employee_name'
      },
      {
        text: 'employee salary',
        value: 'employee_salary'
      },
      {
        text: 'employee age',
        value: 'employee_age'
      },
      {
        text: 'Actions',
        value: 'actions',
        sortable: false
      },
    ]
  },
  methods: {
    deleteRow(item) {
      let index = this.employees.findIndex(emp => emp.id === item.id)
      this.employees.splice(index, 1);
    }
  }

})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
  <v-app id="inspire">
    <v-data-table :headers="headers" :items="employees" class="elevation-1">
      <template v-slot:item.actions="{ item }">
             <v-btn @click="deleteRow(item)">delete</v-btn>
       </template>
    </v-data-table>
  </v-app>
</div>