Edit MongoDB product fields in VueJS using PATCH request link

Question

This is probably a simple question but for some reason I can't figure it out :(. I'm making a full stack application using MongoDB, NestJS and VueJS that contains a form for adding different products in a MongoDB database.

The problem I'm facing now is that I want to be able to edit every product that exists in the database using the following logic: Click the edit button -> Fill in the update information in the pop-up window -> Click the update button

Example:

The problem I'm facing now is that I can't select only the specific product I'm trying to edit into my VueJS application.

To be more precise, I think I need a way to get the ID, for example:

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

Editing function is valid. If instead ${this.produsModificat.id}

I used http://localhost:3000/produse/61a51cecdfb9ea1bd939587b and it worked.

So what I want to do is automatically get the ID when the "Edit" button is clicked.

I'm trying to select each product by its generated unique ID in MongoDB (see image below for example), but I can't find a way to do it and it's driving me crazy :(.

Can someone point me in the right direction on how to achieve this?

Below you can find the logic I implemented for the PATCH request in the frontend file

File name: 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

Your problem seems to have two aspects. The first one is how to get the unique ID from MongoDB and then how to track the unique ID of the patch request on the frontend.

In the first part, look at getters and setters (or modifiers and accessors) in the documentation for whatever product you're using. Find a way to modify the ID property on the response object (the data collection in the main get request for the table record), or define your own property and get the string property of the desired ID. When you define products to use that you control, you can also define your own product_id on each product schema. Then, return that custom unique property and use it to track and find the item the user wants to edit.

If you have everything covered and need some suggestions on the front end and you have a unique ID to track each item, create a subcomponent for the modal that will open the edit button on a single click action . This component will receive relevant product objects by filtering the products array.

In the modal component you have all the logic to edit related products. If your backend allows routing model binding, update the binding key to your unique ID if not using the default ID set by the backend framework.

You can store the "active_record" or item currently being viewed or used by the user in several ways. You can pass that ID to the modal component via a prop, or keep all the business logic in Table.vue and pass the changes via emitted events in the modal, and let Table.vue handle the communication with the backend. You can track the status of active items in one or both of Table.vue and ProductEditModal.vue.

To your point about the edit button needing a unique product ID, just provide the product ID as an attribute to the edit button.

Use v-for to render table rows in any way you choose, and you can define edit buttons. Where item.id can be anything you want, or some other way of tracking active items.

Then, have your modal a) inside an EditButton component where the modal receives the item in question and holds the axios logic, or b) use a method in Table.vue to open your modal and provide it Activities are recorded through the openModal method. Many reputable developers will actually put the modal logic inside the edit button itself, such that the edit button "owns" the edit mode. Alternatively, use the edit button to trigger the modal to open and simply pass everything it needs.