根据插入补丁请求链接的对象ID，在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)"
/>
相关文章