Javascript Vuetify数据表不'；无法获取更新的数组值

我用一些用户数据填充Vuetify数据表。当我从数据表中删除用户时，我会更新用户数组，如下所示：

handleDelete(user) {
  confirm("Are you sure you want to delete this user?") &&
    axios
      .delete("user/" + user.id)
      .then(response => {
        // Delete user from user array
        this.users = this.users.filter(function(el) {
          return el.id != user.id;
        });
      })
},

handleRegister(user) {
  axios
    .post("user/register", user)
    .then(response => {
      // Update User array
      this.users.push(response.data.user);
    })
},

   handleUpdate(user) {
      const id = user.id;
      axios
        .put("user/" + id, user)
        .then(response => {
          // TODO: Update User array
          let foundIndex = this.users.findIndex(
            x => x.id == response.data.user.id
          );
          this.users[foundIndex] = response.data.user;
        })
    },

当我注册新用户时，阵列也会更新，但现在如下所示：

handleDelete(user) {
  confirm("Are you sure you want to delete this user?") &&
    axios
      .delete("user/" + user.id)
      .then(response => {
        // Delete user from user array
        this.users = this.users.filter(function(el) {
          return el.id != user.id;
        });
      })
},

handleRegister(user) {
  axios
    .post("user/register", user)
    .then(response => {
      // Update User array
      this.users.push(response.data.user);
    })
},

   handleUpdate(user) {
      const id = user.id;
      axios
        .put("user/" + id, user)
        .then(response => {
          // TODO: Update User array
          let foundIndex = this.users.findIndex(
            x => x.id == response.data.user.id
          );
          this.users[foundIndex] = response.data.user;
        })
    },

这一切都很好，除了当我更新用户时。在我的函数中，我在用户数组中搜索用户对象，并将其替换为更新的用户对象。但不知何故，数据表不会用新值更新。更新函数如下所示：

handleDelete(user) {
  confirm("Are you sure you want to delete this user?") &&
    axios
      .delete("user/" + user.id)
      .then(response => {
        // Delete user from user array
        this.users = this.users.filter(function(el) {
          return el.id != user.id;
        });
      })
},

handleRegister(user) {
  axios
    .post("user/register", user)
    .then(response => {
      // Update User array
      this.users.push(response.data.user);
    })
},

   handleUpdate(user) {
      const id = user.id;
      axios
        .put("user/" + id, user)
        .then(response => {
          // TODO: Update User array
          let foundIndex = this.users.findIndex(
            x => x.id == response.data.user.id
          );
          this.users[foundIndex] = response.data.user;
        })
    },

---

当我

console.log

this.users[foundIndex]和

response.data.user

的值时，它会显示正确的值。但不知何故，数据表似乎没有得到更新。

我认为它的问题在于“this”变量的范围

//下面应该是这样的
handleDelete（用户）{
常数this=this；
确认（“是否确实要删除此用户？”）&&
axios
.delete（“user/”+user.id）
。然后（响应=>{
//从用户数组中删除用户
_this_0.users=\u this_0.users.filter（函数（el）{
返回el.id！=user.id；
});
})
}

HandlerRegister（用户）{
常数this=this；
axios
.post（“用户/注册”，用户）
。然后（响应=>{
//更新用户阵列
_这是0.users.push（response.data.user）；
})
},

handleUpdate（用户）{
const id=user.id；
常数this=this；
axios
.put（“用户/”+id，用户）
。然后（响应=>{
//TODO:更新用户阵列
让foundIndex=_this_0.users.findIndex(
x=>x.id==response.data.user.id
);
_此_0.users[foundIndex]=response.data.user；
})
}

我目前通过编写以下函数修复了它：

updateUserArray(user) {
  // Look for the index of the user
  let index = this.users.findIndex(
    x => x.id == user.id
  );

  // Remove the user from the array
  this.users= this.users.filter(function(el) {
    return el.id != user.id
  });

  // Add the updated value to the array
  this.users.splice(index, 0, user);
},

---

似乎我必须使用splice函数，因为这会强制DOM刷新，而直接更新数组则不会

返回一个未定义的，抱歉，我不明白。什么返回未定义？“此0”为未定义。那么我认为你的代码没有问题。但是您需要手动刷新dom来更新vue数据表。如果使用拼接，则会强制dom刷新。检查这个