這可能是一個(gè)簡單的問題,但由於某種原因,我無法弄清楚:(。 我正在使用 MongoDB、NestJS 和 VueJS 製作一個(gè)全端應(yīng)用程序,該應(yīng)用程式包含在 MongoDB 資料庫中添加不同產(chǎn)品的表單。
我現(xiàn)在面臨的問題是我希望能夠使用以下邏輯編輯資料庫中存在的每個(gè)產(chǎn)品: 點(diǎn)擊編輯按鈕 -> 在彈出視窗中填寫更新資訊 -> 點(diǎn)擊更新按鈕
範(fàn)例:
我現(xiàn)在面臨的問題是無法只選擇我嘗試編輯到 VueJS 應(yīng)用程式中的特定產(chǎn)品。
更準(zhǔn)確地說,我想我需要一種方法來取得 ID,例如:
axios.patch(`http://localhost:3000/produse/${this.produsModificat.id}`)
編輯功能有效。如果代替 ${this.produsModificat.id}
我使用 http://localhost:3000/produse/61a51cecdfb9ea1bd939587b 它有效。
所以我想做的是在點(diǎn)擊「編輯」按鈕時(shí)自動(dòng)取得 ID。
我試圖透過 MongoDB 中產(chǎn)生的唯一 ID 來選擇每個(gè)產(chǎn)品(例如,請參見下圖),但我找不到方法來做到這一點(diǎn),這讓我抓狂:(。
有人可以指出我如何實(shí)現(xiàn)這一目標(biāo)的正確方向嗎?
下面您可以找到我在前端文件中為 PATCH 請求實(shí)現(xiàn)的邏輯
檔名: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 },
你的問題似乎有兩個(gè)面向。第一個(gè)是如何從 MongoDB 取得唯一 ID,然後如何在前端追蹤補(bǔ)丁請求的唯一 ID。
在第一部分中,請查看您正在使用的任何產(chǎn)品的文檔中的 getter 和 setter(或修改器和存取器)。尋找一種方法來修改回應(yīng)物件(表記錄的主獲取請求中的資料集合)上的 ID 屬性,或定義您自己的屬性並取得所需 ID 的字串屬性。當(dāng)您定義要使用您控制的產(chǎn)品時(shí),您也可以在每個(gè)產(chǎn)品模式上定義自己的product_id。然後,傳回該自訂唯一屬性並使用它來追蹤和尋找使用者想要編輯的項(xiàng)目。
如果您已經(jīng)涵蓋了所有內(nèi)容,並且需要在前端提供一些建議,並且您有一個(gè)獨(dú)特的ID 來跟蹤每個(gè)項(xiàng)目,請為模式創(chuàng)建一個(gè)子組件,該模式將通過單擊操作打開編輯按鈕。此組件將透過過濾產(chǎn)品數(shù)組來接收相關(guān)的產(chǎn)品物件。
在模態(tài)元件中,您擁有編輯相關(guān)產(chǎn)品的所有邏輯。如果您的後端允許路由模型綁定,如果不使用後端框架設(shè)定的預(yù)設(shè) ID,請將綁定金鑰更新為您的唯一 ID。
您可以透過多種方式儲(chǔ)存「active_record」或使用者目前正在查看或使用的項(xiàng)目。您可以透過 prop 將該 ID 傳遞給模態(tài)元件,或者將所有業(yè)務(wù)邏輯保留在 Table.vue 中,並透過模態(tài)中的發(fā)出事件傳遞更改,然後讓 Table.vue 處理與後端的通訊。您可以在 Table.vue 和 ProductEditModal.vue 中的一個(gè)或兩個(gè)中追蹤活動(dòng)項(xiàng)目的狀態(tài)。
對(duì)於您關(guān)於編輯按鈕需要唯一產(chǎn)品 ID 的觀點(diǎn),只需將產(chǎn)品 ID 作為屬性提供給編輯按鈕即可。
使用 v-for 以您選擇的任何方式渲染表行,您都可以定義編輯按鈕。其中,item.id 可以是您想要的任何內(nèi)容,也可以是追蹤活動(dòng)項(xiàng)目的其他方式。
然後,讓你的模態(tài)a) 在EditButton 元件內(nèi)部,其中該模態(tài)接收有問題的項(xiàng)目並保存axios 邏輯,或者b) 使用Table.vue 中的方法打開你的模態(tài)並為其提供活動(dòng)的透過openModal 方法記錄。許多知名的開發(fā)人員實(shí)際上會(huì)將模態(tài)邏輯放在編輯按鈕本身內(nèi)部,例如編輯按鈕「擁有」編輯模式。或者,使用編輯按鈕觸發(fā)模式開啟並簡單地傳遞它需要的所有內(nèi)容。