Search code examples
node.jsmongodbvue.jsnest

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

It may be a simple one, but for some reason, I can't figure it out :(. I'm making a fullstack app using MongoDB, NestJS, and VueJS that consists in a form that is adding different products in a MongoDB database.

The problem I'm facing right now is that I want to be able to edit each product that exists in the database, using the next logic : Click on EDIT button -> Fill in the pop-up with updated info -> Click on the UPDATE button

Example : enter image description here

enter image description here

The problem I'm facing right now is the imposibility of selecting only the specific product I'm trying to edit into my VueJS app.

To be more precise, I'm thinking I need a way to get the ID somtehing like :

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

The functionality of the editing works. If instead of ${this.produsModificat.id}

I use http://localhost:3000/produse/61a51cecdfb9ea1bd939587b it works.

So what I'm trying to do is to automaticly get the ID when the EDIT button is clicked.

I am trying to select each product by the unique ID generated into MongoDB (see picture below for example) but I cannot find a way to do this and it drives me nuts :(.

enter image description here

Can someone point me please into the right direction in how can I achieve this?

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

Filename : 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
    },
Solution

  • Your question seems to be on 2 fronts. The first is how do you get a unique ID from MongoDB and then how do you track that unique ID on your frontend for the patch request.

    In the first part, look into getters and setters (or mutators and accessors) in the documentation for whatever products you are using. Look for a way to modify the ID attribute on your response object (the data collection in your main get request for the table records) or to define your own attribute and get a string attribute of the ID you want. You could also define your own product_id on each Product modal when you define your products to define with that you control. Then, return that custom unique attribute and use it to track and find the item your user wants to edit.

    If you have all of that covered and need some suggestions on the front end, and you've got a unqiue ID to track each item, create a sub-component for the modal that would be opened by the click action on the edit button. That component would receive the Product object in question by filtering through the array of Products.

    In your modal component, you have all of the logic for editing the product in question. If your backend allow route-model-binding, update your binding key to your unique ID if not using the default ID set by the backend framework.

    There are numerous ways that you could store your 'active_record' or the item that the user is currently viewing or working with. You could pass that ID down to the modal component via prop or keep all of your business logic in Table.vue and pass up the changes via an emit event in your modal and then let Table.vue handle the communication to your backend. You could track your active item in state in either or both of Table.vue and ProductEditModal.vue.

    To your point about the edit button needing the unique product ID, simply provide the product ID to the edit button as a property.

    With your v-for rendering the table rows in whatever way you choose, you would have your edit button defined. Where, item.id could be anything you want or another way of tracking your active item.

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

    Then, have your modal either a) inside of the EditButton component wherein that 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 with the active record via the openModal method. A number of well known developers will actually put the modal logic inside of the edit button itself, e.g. the edit button 'owns' the edit modal. Or, use the edit button to trigger the modal opening and simply pass it everything it needs.