Im testing dashboard v2 template table , and have not idea why i cannot see column that can be editable via snackbar with v-edit-dialog witch looks kinda cool, this is my code attempt so i give up with puting v-text-field.
Is there any chance to get v-edit-dialog working ?
<template>
<v-text-field v-model="seach" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="outlined"
hide-details></v-text-field>
<v-data-table
density="compact"
:sort-by="sortBy"
:sort-order="sortBy[0].order"
v-model:search="search"
:headers="headers"
:items="msg?.payload"
:loading="loading"
>
<template v-slot:item.id="{ item }"> {{item.id}} </template>
<template v-slot:item.time="{ item }"> {{item.time}} </template>
<template class="text-xs-right" v-slot:item.opis="props"">
<!-- <v-edit-dialog
:return-value.sync="props.item.opis"
@save="save"
@cancel="cancel"
@open="open"
@close="close"
> -->
<!-- {{ props.item.opis }} -->
<!-- <template v-slot:input> -->
<v-text-field v-model="props.item.opis"
:rules="[max150chars]"
counter
single-line variant="outlined"
>
</v-text-field>
<!-- </template> -->
<!-- </v-edit-dialog> -->
</template>
</v-data-table>
<v-snackbar v-model="snack" :timeout="3000" :color="snackColor">
{{ snackText }}
<template v-slot:action="{ attrs }">
<v-btn v-bind="attrs" text @click="snack = true">
Close
</v-btn>
</template>
</v-snackbar>
<div class="text-center">
<v-btn :disabled="loading" append-icon="mdi-refresh" text="Refresh" variant="outlined" @click="onClick"></v-btn>
</div>
</template>
<script>
export default {
data() {
return {
snack: true,
snackColor: '',
snackText: '',
loading: false,
headers: [
{ title: 'Id', align: 'start', key: 'id' },
{ title: 'Time', align: 'start', key: 'time' },
{ title: 'Opis', align: 'start', key: 'opis'},
],
search: '',
sortBy: [{ key: 'id', order:'desc'}]
}
},
watch: {
},
computed: {
},
methods: {
onClick () {
this.loading = true
setTimeout(() => {
this.loading = false
}, 1000)
},
save () {
this.snack = true
this.snackColor = 'success'
this.snackText = 'Data saved'
},
cancel () {
this.snack = true
this.snackColor = 'error'
this.snackText = 'Canceled'
},
open () {
this.snack = true
this.snackColor = 'info'
this.snackText = 'Dialog opened'
},
close () {
console.log('Dialog closed')
},
},
mounted() {
},
unmounted() {
}
}
</script>
<style>
</style>
