删除操作后如何刷新列表？答案

【问题标题】：How do I refresh list after delete action?删除操作后如何刷新列表？
【发布时间】：2021-05-05 16:49:27
【问题描述】：

所以我通过像listUsers(props.page);这样的组件来获取数据

这是我可组合的功能

  const listUsers = async (payload) => {
    const result = await UserService.get(2, payload);
    data.userList = result.data.users;
    data.totalPages = result.data.total_pages
  }

这是我的删除功能

  const deleteUser = async (id) => {
    try {
      await UserService.delete(id);
      data.confirmation = !data.confirmation;

    } catch (err) {
      data.confirmation = !data.confirmation;
      throw err;
    }
  }

在deleteUser 中成功等待后如何使用listUsers 函数？我想在删除用户后刷新组件中的列表。

我不能直接使用 listUsers 函数，因为它要求我提供有效载荷，而有效载荷是来自组件的 props.page..

【问题讨论】：

标签： vue.js vuejs3

【解决方案1】：

尝试从用户数组中删除用户：

const deleteUser = async (id) => {
  try {
    await UserService.delete(id);
    data.confirmation = !data.confirmation;
    data.userList = data.userList.filter(user => user.id !== id);
    // use the correct property name in your data-----^
  } catch (err) {
    data.confirmation = !data.confirmation;
    throw err;
  }
}

您必须使用用户数和用户页面页面重新计算data.totalPages。

【讨论】：