Modifier les champs du produit MongoDB dans VueJS à l'aide du lien de demande PATCH

Question

C'est peut-être une question simple mais pour une raison quelconque, je n'arrive pas à la comprendre :(. Je crée une application full stack utilisant MongoDB, NestJS et VueJS qui contient un formulaire permettant d'ajouter différents produits dans une base de données MongoDB.

Le problème auquel je suis confronté maintenant est que je veux pouvoir modifier chaque produit qui existe dans la base de données en utilisant la logique suivante : Cliquez sur le bouton Modifier -> Remplissez les informations de mise à jour dans la fenêtre contextuelle ->

Exemple :

Le problème auquel je suis confronté maintenant est que je ne peux pas sélectionner uniquement le produit spécifique que j'essaie de modifier dans mon application VueJS.

Pour être plus précis, je pense que j'ai besoin d'un moyen d'obtenir l'identité, comme :

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

La fonction d'édition fonctionne. Si à la place ${this.produsModificat.id}

J'ai utilisé http://localhost:3000/produse/61a51cecdfb9ea1bd939587b et cela a fonctionné.

Donc, ce que je veux faire, c'est obtenir automatiquement l'identifiant lorsque vous cliquez sur le bouton "Modifier".

J'essaie de sélectionner chaque produit par son identifiant unique généré dans MongoDB (voir l'image ci-dessous par exemple) mais je ne trouve pas de moyen de le faire et ça me rend fou :(.

Quelqu’un peut-il m’indiquer la bonne direction pour y parvenir ?

Vous trouverez ci-dessous la logique que j'ai implémentée pour la requête PATCH dans le fichier frontend

Nom du fichier : 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

Votre problème semble avoir deux aspects. La première est de savoir comment obtenir l'ID unique de MongoDB, puis comment suivre l'ID unique de la demande de correctif sur le frontend.

Dans la première partie, consultez les getters et setters (ou modificateurs et accesseurs) dans la documentation du produit que vous utilisez. Trouvez un moyen de modifier la propriété ID sur l'objet de réponse (la collecte de données dans la demande d'obtention principale pour l'enregistrement de table), ou définissez votre propre propriété et obtenez la propriété de chaîne de l'ID souhaité. Lorsque vous définissez des produits à utiliser que vous contrôlez, vous pouvez également définir votre propre product_id sur chaque schéma de produit. Ensuite, renvoyez cette propriété unique personnalisée et utilisez-la pour suivre et trouver l'élément que l'utilisateur souhaite modifier.

Si vous avez tout couvert et avez besoin de suggestions sur le front-end, et que vous disposez d'un identifiant unique pour suivre chaque projet, créez un sous-composant pour le modal qui ouvrira un bouton d'édition en un seul clic. Ce composant recevra les objets produits pertinents en filtrant le tableau de produits.

Dans le composant modal, vous avez toute la logique pour éditer les produits associés. Si votre backend autorise la liaison du modèle de routage, mettez à jour la clé de liaison avec votre ID unique si vous n'utilisez pas l'ID par défaut défini par le framework backend.

Il existe de nombreuses façons de stocker un "active_record" ou l'élément que l'utilisateur consulte ou avec lequel il travaille actuellement. Vous pouvez transmettre cet ID au composant modal via un accessoire, ou conserver toute la logique métier dans Table.vue et transmettre les modifications via des événements émis dans le modal, et laisser Table.vue gérer la communication avec le backend. Vous pouvez suivre l'état des éléments actifs dans l'un ou les deux de Table.vue et ProductEditModal.vue.

Pour ce qui est du bouton d'édition nécessitant un identifiant de produit unique, fournissez simplement l'identifiant du produit en tant qu'attribut du bouton d'édition.

Utilisez v-for pour afficher les lignes du tableau comme vous le souhaitez et vous pouvez définir des boutons d'édition. Où item.id peut être tout ce que vous voulez, ou un autre moyen de suivre les éléments actifs.

Ensuite, placez votre modal a) dans un composant EditButton où le modal reçoit l'élément en question et contient la logique axios, ou b) utilisez les méthodes de Table.vue pour ouvrir votre modal et lui donner la journalisation active via la méthode openModal. De nombreux développeurs réputés placeront en fait la logique modale à l'intérieur du bouton d'édition lui-même, de sorte que le bouton d'édition "possède" le mode d'édition. Vous pouvez également utiliser le bouton d'édition pour déclencher l'ouverture du modal et transmettre simplement tout ce dont il a besoin.