根据插入 PATCH 请求 link 中的 ObjectID 在 VueJS 中编辑来自 MongoDB 的产品字段

Question

这可能是一个简单的问题，但由于某种原因，我无法理解:(。我正在使用 MongoDB、NestJS 和 VueJS 制作一个全栈应用程序，该应用程序包含在 MongoDB 数据库中添加不同产品的表单。

我现在面临的问题是我希望能够使用下一个逻辑编辑数据库中存在的每个产品：单击“编辑”按钮 -> 在弹出窗口中填写更新信息 -> 单击“更新”按钮

示例：

我现在面临的问题是无法 select 仅将我尝试编辑的特定产品添加到我的 VueJS 应用程序中。

更准确地说，我想我需要一种方法来获取 ID somtehing，例如：

axios.patch(`http://localhost:3000/produse/${this.produsModificat.id}`)

编辑作品的功能。如果不是 ${this.produsModificat.id}

我使用 http://localhost:3000/produse/61a51cecdfb9ea1bd939587b 它有效。

所以我要做的是在单击“编辑”按钮时自动获取 ID。

我正在尝试 select 每个产品的唯一 ID 生成到 MongoDB（例如，参见下图）但我找不到方法来做到这一点，这让我抓狂:( .

有人可以指出我如何实现这一目标的正确方向吗？

你可以在下面找到我在前端文件中为 PATCH 请求实现的逻辑

文件名：Table.vue

        updateProduct() {
        let produsModificat = {
            Name: this.Produs.Name,
            Code: this.Produs.Code,
            Weight: this.Produs.Weight,
            Price: this.Produs.Price,
            Color: this.Produs.Color,
            isDeleted: this.Produs.isDeleted
        }
        console.log(this)
    axios.patch(`http://localhost:3000/produse/${this.produsModificat.id}`)
    .then((response) => {
        console.log(response);
        })
        .catch((error) => {
        console.log(error);
        })
        console.log();
        return produsModificat
    },

Answer 1

您的问题似乎涉及两个方面。第一个问题是如何从 MongoDB 获取唯一 ID，然后如何在补丁请求的前端跟踪该唯一 ID。

在第一部分中，查看您正在使用的任何产品的文档中的 getter 和 setter（或修改器和访问器）。寻找一种方法来修改响应对象上的 ID 属性（table 记录的主要获取请求中的数据集合）或定义您自己的属性并获取所需 ID 的字符串属性。当您定义要使用您控制的产品进行定义时，您还可以在每个产品模式上定义自己的 product_id。然后，return 该自定义唯一属性并使用它来跟踪和查找您的用户想要编辑的项目。

如果您已经涵盖了所有这些并且需要一些关于前端的建议，并且您有一个独特的 ID 来跟踪每个项目，请为将通过单击操作打开的模式创建一个子组件在编辑按钮上。该组件将通过过滤产品数组来接收有问题的产品对象。

在您的模态组件中，您拥有编辑相关产品的所有逻辑。如果您的后端允许路由模型绑定，如果不使用后端框架设置的默认 ID，请将您的绑定密钥更新为您的唯一 ID。

您可以通过多种方式存储您的 'active_record' 或用户当前正在查看或使用的项目。您可以通过 prop 将该 ID 传递给模态组件，或者将所有业务逻辑保留在 Table.vue 中，并通过模态中的发射事件传递更改，然后让 Table.vue 处理与您的通信后端。您可以在 Table.vue 和 ProductEditModal.vue.

中的一个或两个状态中跟踪您的活动项目

关于编辑按钮需要唯一产品 ID 的观点，只需将产品 ID 作为属性提供给编辑按钮即可。

使用 v-for 以您选择的任何方式呈现 table 行，您将定义编辑按钮。其中，item.id 可以是您想要的任何内容，也可以是其他跟踪活动项目的方式。

<EditButton 
 :record="item"
 :product-id="item.id" 
 @click="openModal(item)"
/>

然后，让您的模态 a) 在 EditButton 组件内部，其中该模态接收有问题的项目并保存 axios 逻辑，或者 b) 使用 Table.vue 中的方法打开您的模态并提供它通过 openModal 方法与活动记录一起使用。许多知名开发人员实际上会将模态逻辑放在编辑按钮本身内部，例如编辑按钮 'owns' 编辑模式。或者，使用编辑按钮触发模式打开并简单地传递它需要的一切。

根据插入 PATCH 请求 link 中的 ObjectID 在 VueJS 中编辑来自 MongoDB 的产品字段

Edit product fields from MongoDB in VueJS based on ObjectID inserted into PATCH request link

node.js

mongodb

vue.js

nest