Vuetify datatable crud on click "new" - api

Question

I using example from documentation datatable with crud options.
How to change "New" on-click function?
What is v-slot:activator="{ on, attrs }"?
I need to call api with vuex dispatch.
I want that before edit dialog is opened row will immediately created with ID parameter inside from api.
I added #click, to make call. Is it correct?
<template>
<v-data-table
:headers="headers"
:items="PIATConsignments"
:footer-props="footerProps"
class="elevation-1"
>
<template v-slot:top>
<v-toolbar
flat
>
<v-toolbar-title>Items</v-toolbar-title>
<v-divider
class="mx-4"
inset
vertical
></v-divider>
<v-spacer></v-spacer>
<v-dialog
v-model="dialogEdit"
scrollable
max-width="800px"
>
<template v-slot:activator="{ on, attrs }">
<v-btn
color="primary"
dark
class="mb-2"
v-bind="attrs"
v-on="on"
#click="newItem"
>
New
</v-btn>
</template>
<v-card>
<v-card-title>
<span class="text-h5">{{ formTitle }}</span>
</v-card-title>
<v-card-text style="height: 600px;">
<v-container>
<v-row>
<v-col
cols="12"
sm="12"
md="6"
>
<v-autocomplete
v-model="editedItem.DepartureCountryDetails"
:items="countries"
item-text="ShortCountryName"
label="Departure"
class="input-group--focused"
v-bind:readonly="isReadonly"
return-object
></v-autocomplete>
</v-col>
<v-col
cols="12"
sm="12"
md="6"
>
<v-autocomplete
v-model="editedItem.DestinationCountryDetails"
:items="countries"
item-text="ShortCountryName"
label="Destination"
class="input-group--focused"
v-bind:readonly="isReadonly"
return-object
></v-autocomplete>
</v-col>
</v-row>
<v-row>
<v-col
cols="12"
sm="12"
md="6"
>
<v-text-field
v-model="editedItem.CAInvoiceValueAmount"
label="Amount"
></v-text-field>
</v-col>
<v-col
cols="12"
sm="12"
md="6"
>
<v-text-field
v-model="editedItem.UnifiedGrossMassMeasure"
label="Weight"
></v-text-field>
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="blue darken-1"
text
#click="close"
>
Close
</v-btn>
<v-btn
color="blue darken-1"
text
#click="save"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-dialog v-model="dialogDelete" max-width="500px">
<v-card>
<v-card-title class="text-h5">Do you want to delete item?</v-card-title>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text #click="closeDelete">Нет</v-btn>
<v-btn color="blue darken-1" text #click="deleteItemConfirm">Да</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
</template>
<template v-slot:item.actions="{ item }">
<v-icon
small
class="mr-2"
#click="editItem(item)"
>
mdi-pencil
</v-icon>
<v-icon
small
#click="deleteItem(item)"
>
mdi-delete
</v-icon>
</template>
</v-data-table>
</template>
<script>
import modelPIATConsignment from '#/models/form/consignment/piat/PIATConsignment'
import DepartureCountryDetails from './DepartureCountryDetails.vue'
export default {
name: 'PIATConsignmentDetailsTable',
components: {
DepartureCountryDetails,
},
props: {
consignmentForm: { Object },
},
data: function() {
return {
dialogEdit: false,
dialogDelete: false,
headers: [
{ text: 'Departure', value: 'DepartureCountryDetails.ShortCountryName' },
{ text: 'Destination', value: 'DestinationCountryDetails.ShortCountryName' },
{ text: 'Amount', value: 'CAInvoiceValueAmount' },
{ text: 'Weight', value: 'UnifiedGrossMassMeasure' },
{ text: 'Actions', value: 'actions' },
],
footerProps: {
'disable-items-per-page': true,
'items-per-page-options': [],
'items-per-page-all-text': '',
},
PIATConsignments: this.consignmentForm.PIATConsignmentDetails,
editedIndex: -1,
editedItem: modelPIATConsignment,
defaultItem: modelPIATConsignment,
}
},
computed: {
formTitle () { return this.editedIndex === -1 ? 'New' : 'Edit' },
countries() { return this.$store.getters['dict/countries'] },
},
watch: {
dialogEdit (val) { val || this.close() },
dialogDelete (val) { val || this.closeDelete() },
},
methods: {
editItem (item) {
this.editedIndex = this.PIATConsignments.indexOf(item)
this.editedItem = Object.assign({}, item)
this.dialogEdit = true
},
deleteItem (item) {
this.editedIndex = this.PIATConsignments.indexOf(item)
this.editedItem = Object.assign({}, item)
this.dialogDelete = true
},
deleteItemConfirm () {
this.PIATConsignments.splice(this.editedIndex, 1)
this.closeDelete()
},
close () {
this.dialogEdit = false
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1
})
},
closeDelete () {
this.dialogDelete = false
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1
})
},
save () {
if (this.editedIndex > -1) {
Object.assign(this.PIATConsignments[this.editedIndex], this.editedItem)
}
else {
this.PIATConsignments.push(this.editedItem)
}
this.close()
},
}
}
</script>

Answer 1

After hour trying.
Yes. Adding #click event on the button is right way.
After this just need manipulate with "current" row data.
methods: {
...
newItem() {
this.$store.dispatch('our-dispatch-method')
.then(res => {
res.id // For example we created element in our api and response is new ID.
// Now push to the table item list editedItem and set the index
this.PIATConsignments.push(this.editedItem)
this.editedIndex = this.PIATConsignments.indexOf(this.editedItem)
// Set your ID from api inside editedItem
this.editedItem.id = res.id;
})
}
...
}