How can I write a function that adds a new employee to the table and it automatically reloads the data without me having to refresh the page ?
I tried this but it doesn't work : First I created a loadData function :

loadData() {
var me = this;

  axios
    .get("http://cukcuk.manhnv.net/api/v1/Employees")
    .then(function (res) {
      me.employees = res.data;
    })
    .catch(function (res) {
      console.log(res);
    });
},`

Then I added to function saveEmployeeOnClick but it not working

btnSaveOnClick() {
  let me = this;
  let isValid = me.validateData();
  if (isValid) {
    if (me.formMode == Enum.FormMode.Add) {
      axios
        .post("http://cukcuk.manhnv.net/api/v1/Employees", me.employee)
        .then(function () {
          alert("Thêm mới thành công!");
          me.loadData(); <-----
          me.isShow = false;
        })
        .catch(function (res) {
          console.log(res);
        });
    } else {
      console.log("Cất dữ liệu đã chỉnh sửa");
    }
  }
},

Here is my full Vue Code : https://github.com/vietquang99/VuejsDemo/blob/d65378f48ab8d0a60a37be810c4d0783ff1d5fa7/EmployeeForm.vue

CodePudding user response：

Try to wait for response:

async loadData() {
  var me = this;

  await axios
 ...

and in method

async btnSaveOnClick() {
  ...
  await me.loadData(); 
  ...

CodePudding user response：

haha

employees !== employee

enter image description here

enter image description here