根据插入补丁请求链接的对象ID，在VueJS中编辑MongoDB中的产品字段 [英] Edit product fields from MongoDB in VueJS based on ObjectID inserted into PATCH request link

问题描述

这可能是一个简单的问题，但由于某种原因，我想不通。 我正在使用MongoDB、NestJS和VueJS制作一个完整的堆栈应用程序，它的形式是在MongoDB数据库中添加不同的产品。

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

示例：

我现在面临的问题是不可能只选择我试图在我的VueJS应用程序中编辑的特定产品。

更准确地说，我想我需要一种方法来获得ID，就像：

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

编辑的功能起作用。如果不是${this.produsModifiat.id}

我使用http://localhost:3000/produse/61a51cecdfb9ea1bd939587b，它可以工作。

因此，我尝试做的是在单击编辑按钮时自动获取ID。

我试图根据MongoDB中生成的唯一ID来选择每种产品(例如，见下图)，但我找不到这样做的方法，这让我抓狂：(.

有人能给我指个方向吗？我怎样才能做到这一点？

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

文件名：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
    },

推荐答案

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

在第一部分中，无论您使用的是什么产品，请查看文档中的获取方法和设置方法(或变异器和访问器)。寻找一种方法来修改响应对象(表记录的主GET请求中的数据集合)上的ID属性，或者定义您自己的属性并获取所需ID的字符串属性。当您定义要使用您控制的产品定义的产品时，您还可以在每个产品模型上定义您自己的product_id。然后，返回该自定义唯一属性，并使用它跟踪和查找您的用户要编辑的项目。

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

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

有多种方法可以存储您的‘active_record’或用户当前正在查看或使用的项目。您可以通过prop将该ID向下传递给模型组件，或者将所有业务逻辑保存在Table.vue中，并通过模型中的emit事件传递更改，然后让Table.vue处理与后端的通信。您可以在Table.vue和/或ProductEditModal.vue中跟踪处于活动状态的项目。

有关编辑按钮需要唯一产品ID的问题，只需将产品ID作为属性提供给编辑按钮。

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

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

然后，让您的MODEL或者a)在EditButton组件内，该MODEL接收有问题的项并保存AXIOS逻辑，或者b)使用Table.vue中的方法打开您的MODEL并通过OpenMODAL方法为其提供活动记录。许多知名的开发人员实际上会将模式逻辑放在编辑按钮本身内，例如，编辑按钮‘拥有’编辑模式。或者，使用编辑按钮触发模式打开并向其传递所需的所有内容。

这篇关于根据插入补丁请求链接的对象ID，在VueJS中编辑MongoDB中的产品字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！