愿所有的美好和期待都能如约而至

根据插入补丁请求链接的对象ID,在VueJS中编辑MongoDB中的产品字段

发布时间:  来源:互联网  作者:匿名  标签:error Edit product fields from MongoDB in VueJS based on ObjectID inserted into   热度:37.5℃

本文介绍了根据插入补丁请求链接的对象ID,在VueJS中编辑MongoDB中的产品字段的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这可能是一个简单的问题,但由于某种原因,我想不通。
我正在使用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中的产品字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,

勇敢去编程!

勇敢的热爱编程,未来的你一定会大放异彩,未来的生活一定会因编程更好!

TOP