Edit medan produk MongoDB dalam VueJS menggunakan pautan permintaan PATCH

Question

Ini mungkin soalan mudah tetapi atas sebab tertentu saya tidak dapat memahaminya :(. Saya sedang membuat aplikasi tindanan penuh menggunakan MongoDB, NestJS dan VueJS yang mengandungi borang untuk menambah produk yang berbeza dalam pangkalan data MongoDB.

Masalah yang saya hadapi sekarang ialah saya ingin dapat mengedit setiap produk yang wujud dalam pangkalan data menggunakan logik berikut: Klik butang edit -> Isi maklumat kemas kini dalam tetingkap timbul ->

Contoh:

Masalah yang saya hadapi sekarang ialah saya tidak boleh memilih produk tertentu sahaja yang saya cuba edit ke dalam aplikasi VueJS saya.

Untuk lebih tepat, saya rasa saya perlukan cara untuk mendapatkan ID, seperti:

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

Fungsi penyuntingan berfungsi. Jika sebaliknya ${this.produsModificat.id}

Saya menggunakan http://localhost:3000/produse/61a51cecdfb9ea1bd939587b dan ia berjaya.

Jadi apa yang saya mahu lakukan ialah mendapatkan ID secara automatik apabila butang "Edit" diklik.

Saya cuba memilih setiap produk mengikut ID uniknya yang dijana dalam MongoDB (lihat imej di bawah sebagai contoh) tetapi saya tidak dapat mencari cara untuk melakukannya dan ia membuatkan saya gila :(.

Bolehkah seseorang menunjukkan saya ke arah yang betul tentang cara untuk mencapai ini?

Di bawah ini anda boleh menemui logik yang saya laksanakan untuk permintaan PATCH dalam fail bahagian hadapan

Nama fail: 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

Masalah anda nampaknya ada dua aspek. Yang pertama ialah cara mendapatkan ID unik daripada MongoDB dan kemudian cara menjejak ID unik permintaan tampalan pada bahagian hadapan.

Dalam bahagian satu, lihat pengambil dan penetap (atau pengubah suai dan pelengkap) dalam dokumentasi untuk apa-apa produk yang anda gunakan. Cari cara untuk mengubah suai sifat ID pada objek tindak balas (kutipan data dalam permintaan dapatkan utama untuk rekod jadual), atau tentukan sifat anda sendiri dan dapatkan sifat rentetan ID yang dikehendaki. Apabila anda menentukan produk untuk digunakan yang anda kawal, anda juga boleh menentukan product_id anda sendiri pada setiap skema produk. Kemudian, kembalikan sifat unik tersuai itu dan gunakannya untuk menjejak dan mencari item yang ingin diedit oleh pengguna.

Jika anda mempunyai segala-galanya yang dilindungi dan memerlukan beberapa cadangan pada bahagian hadapan, dan anda mempunyai ID unik untuk menjejaki setiap projek, buat subkomponen untuk modal yang akan membuka butang edit pada satu klik. Komponen ini akan menerima objek produk yang berkaitan dengan menapis tatasusunan produk.

Dalam komponen modal anda mempunyai semua logik untuk mengedit produk berkaitan. Jika bahagian belakang anda membenarkan pengikatan model penghalaan, kemas kini kunci pengikatan kepada ID unik anda jika tidak menggunakan ID lalai yang ditetapkan oleh rangka kerja bahagian belakang.

Terdapat banyak cara anda boleh menyimpan "rekod_aktif" atau item yang sedang dilihat atau digunakan oleh pengguna. Anda boleh menghantar ID tersebut kepada komponen modal melalui prop, atau menyimpan semua logik perniagaan dalam Table.vue dan lulus perubahan melalui peristiwa yang dipancarkan dalam modal, dan biarkan Table.vue mengendalikan komunikasi dengan bahagian belakang. Anda boleh menjejaki status item aktif dalam satu atau kedua-dua Table.vue dan ProductEditModal.vue.

Untuk maksud anda tentang butang edit yang memerlukan ID produk unik, cuma berikan ID produk sebagai atribut kepada butang edit.

Gunakan v-for untuk memaparkan baris jadual dalam apa jua cara yang anda pilih dan anda boleh menentukan butang edit. Di mana item.id boleh menjadi apa sahaja yang anda mahukan, atau cara lain untuk menjejaki item aktif.

Kemudian, letakkan modal anda a) di dalam komponen EditButton di mana modal menerima item yang dimaksudkan dan memegang logik aksios, atau b) gunakan kaedah dalam Table.vue untuk membuka modal anda dan berikan Pengelogan aktif melalui kaedah openModal. Ramai pembangun yang bereputasi sebenarnya akan meletakkan logik modal di dalam butang edit itu sendiri, supaya butang edit "memiliki" mod edit. Sebagai alternatif, gunakan butang edit untuk mencetuskan modal untuk membuka dan hanya lulus semua yang diperlukan.