Vue - Vuetify 服务器端数据表错误

Question

我注意到我的 vuetify 服务器端数据表存在错误。当一个数据表没有数据，然后我尝试添加一个新的，它会成功但它没有显示在表中，我什至检查了我的数据库。在我点击浏览器的刷新按钮后，它现在显示了。

但是当一个数据已经存在（甚至只有一个）时，新添加的数据会自动反映在表格中。我不知道是什么导致了这种行为，它只在没有数据时发生。我认为这与正在渲染的空表有关。

模板

<v-data-table
  :headers="headers"
  :items="tableData"
  :editItem="this.editItem"
  :deleteItem="this.deleteItem"
  :options.sync="pagination" 
  :server-items-length="totalData" 
  :loading="loading"
  dense
>

脚本

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()
    },
  }
}

Answer 1

所以经过无数次的尝试，我终于找到了解决办法。

 try {
   let res = await axios.post('/api/departments', this.tableItem)
   this.getDataFromApi().then(data => {
     this.tableData = data.items
     this.totalData = data.total
   })
 }