Recently, I have been exploring the usage of v-data-table within the Vuetify.js framework. While v-data-table has proven to be quite beneficial in handling data, I encountered some challenges when attempting to integrate additional components.
Despite my efforts, my initial experiment did not yield the desired outcome. Specifically, I attempted to incorporate a v-btn within each row, only to encounter an error message during the process.
If anyone has any advice or suggestions on how to successfully add buttons and textfields to v-data-tables, your input would be greatly appreciated.
<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>
[error message]
TypeError: Cannot read property 'email' of undefined at eval (axiostest4.vue?eedd:35) ....