Vuetify 数据表没有得到更新的数组值答案

【问题标题】：Vuetify data table doesn't get the updated array valuesVuetify 数据表没有得到更新的数组值
【发布时间】：2020-01-04 10:03:59
【问题描述】：

我用一些用户数据填充了 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;
        })
    },

当我 console.log this.users[foundIndex] 和 response.data.user 的值时，它显示了正确的值。但不知何故，数据表似乎没有更新。

【问题讨论】：

标签： javascript arrays vuetify.js

【解决方案1】：

我认为它与“this”变量的范围有关。

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

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

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

【讨论】：

返回undefined
对不起，我不明白。什么返回未定义？
'_this_0' 未定义
好的。然后我认为你的代码没有问题。但是你需要手动刷新 dom 来更新 vue 数据表。如果你使用 splice 它会强制 dom 刷新。检查这个link

【解决方案2】：

我目前通过编写这个函数来修复它：

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 刷新，而直接更新数组则不会。

【讨论】：