时间戳

首页 > 解决方案 > 尽管视图初始化，但有时仍显示已删除的项目 - Vue，Node.js

node.js - 尽管视图初始化，但有时仍显示已删除的项目 - Vue，Node.js

问题描述

我在 Vue.js、Node.js 和 MongoDB 中创建应用程序。我有一个项目列表，每个项目旁边都有删除按钮。通常它可以工作，但是一次，例如 20 次删除，被删除的项目保留在列表中，尽管列表在每次删除后初始化。手动刷新页面后，删除的项目消失了。如何解决？

Vue组件：

 methods: {
    async initialize() {
      return Service.getTool()
        .then((response) => {
          this.tools = response;
        })
        .catch((error) => {
          this.handleError(error, this.errors);
        })
        .finally(() => {
        });
    },
   async deleteItem(id) {
      await Service.deleteTool(id);
      await this.initialize();
    },
}

服务：

    static async getTool() {
        const res = await api.get('tool/get')
        try {
            return res.data;
        } catch (err) {
            return err;
        }
    }
    static deleteTool(id) {
        return api.delete(`${'delete'}/${id}`);
    }

后端：

router.delete('/delete/:id', (req, res) => {
  Tool.deleteOne({ _id: req.params.id }, function (err) {
    if (!err) {
      return res.json('Item has been deleted');
    }
    else {
      res.status(500).send(err);
    }
  });
})

标签： node.jsmongodbvue.js

解决方案

该项目在报告时未被删除：

  tool.remove();
  return res.json('Item has been deleted');

当有许多项目要处理时会出现问题，这意味着需要足够长的时间才能显示竞争条件。

基于回调的 API 对于所有主要库都已过时。它应该通过承诺来实现：

try {
  const tool = await Tool.findOne({ _id: req.params.id });
  ...
  await tool.remove();
  return res.json('Item has been deleted');

推荐阅读