I noticed a bug with my vuetify server-side data table. When a data table contains no data and then I attempt to add a new one, it will be successful but it is not displayed in the table, I even checked my database. After I hit the refresh button of the browser, it now shows.
But when a data already exist (even just one), the newly added data automatically reflects in the table. I don't know what is causing this behavior and it only happens when there is no data. I think it has something to do with an empty table being rendered.
Template
<v-data-table :headers="headers" :items="tableData" :editItem="this.editItem" :deleteItem="this.deleteItem" :options.sync="pagination" :server-items-length="totalData" :loading="loading" dense > Script
export default { data() { return { editedIndex: -1, search: "", loading: true, pagination: {}, dialog: false, valid: false, validationErrors: '', tableData: [], totalData: 0, departments: [], tableItem: { name: '', departmend_id: '', }, snackbar: { enable: false, name: '', message: '', }, headers: [ { text: 'ID', value: 'id' }, { text: 'Department Name', value: 'name' }, { text: 'From Department', value: 'department' }, { text: 'Created At', value: 'created_at' }, { text: 'Action', value: 'action' }, ], rules: { name: [ v => !!v || 'This field is required', v => (v && v.length <= 50) || 'Field must be less than 50 characters' ] } } }, watch: { params: { handler() { this.getDataFromApi().then(data => { this.tableData = data.items this.totalData = data.total }) }, deep: true } }, computed: { params(nv) { return { ...this.pagination, query: this.search } }, formTitle() { return this.editedIndex === -1 ? 'New Section' : this.tableItem.name }, }, mounted() { this.getDataFromApi().then(data => { this.tableData = data.items this.totalData = data.total }) }, created() { this.getDepartments() }, methods: { async getDataFromApi() { this.loading = true return new Promise((resolve, reject) => { const { sortBy, sortDesc, page, itemsPerPage } = this.pagination let search = this.search.trim().toLowerCase() axios.get('/api/sections').then(res => { let items = _.orderBy(res.data, ['created_at'], ['desc']) const total = items.length if (search) { items = items.filter(item => { return Object.values(item).join(",").toLowerCase().includes(search) }) } if (sortBy.length === 1 && sortDesc.length === 1) { items = items.sort((a, b) => { const sortA = a[sortBy[0]] const sortB = b[sortBy[0]] if (sortDesc[0]) { if (sortA < sortB) return 1 if (sortA > sortB) return -1 return 0 } else { if (sortA < sortB) return -1 if (sortA > sortB) return 1 return 0 } }) } if (itemsPerPage > 0) { items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage) } setTimeout(() => { this.loading = false resolve({ items, total }) }, 300) }) }) }, async initialize() { this.loading = true let res = await axios.get('/api/sections') this.tableData = _.orderBy(res.data, ['created_at'], ['desc']) setTimeout(() => { this.loading = false }, 300) }, async getDepartments() { let res = await axios.get('/api/departments') this.departments = _.orderBy(res.data, ['name'], ['asc']) }, reset() { this.$refs.form.reset() }, close() { this.dialog = false this.$refs.form.reset() setTimeout(() => { this.editedIndex = -1 }, 300) }, editItem(item) { this.editedIndex = this.tableData.indexOf(item) this.tableItem = Object.assign({}, item) this.dialog = true }, updateSnackbar(e) { this.snackbar.enable = e }, async deleteItem(item) { let index = this.tableData.indexOf(item) if(confirm('Are you sure you want to delete this item?') && this.tableData.splice(index, 1)) { let res = await axios.delete('/api/sections/' + item.id) this.snackbar.name = '' this.snackbar.message = res.data.message this.snackbar.enable = true } }, async save() { if (this.editedIndex > -1) { try { Object.assign(this.tableData[this.editedIndex], this.tableItem) let res = await axios.put('/api/sections/' + this.tableItem.id, this.tableItem) this.snackbar.name = res.data.name this.snackbar.message = res.data.message } catch(error) { if (error.response.status == 422){ this.validationErrors = error.response.data.errors } } } else { try { let res = await axios.post('/api/sections', this.tableItem) this.snackbar.name = res.data.name this.snackbar.message = res.data.message } catch(error) { if (error.response.status == 422){ this.validationErrors = error.response.data.errors } } } await this.initialize() this.snackbar.enable = true this.close() this.reset() }, } } 