国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

使用PATCH請求連結(jié)將VueJS中的MongoDB產(chǎn)品欄位進(jìn)行編輯
P粉550823577
P粉550823577 2024-03-31 23:05:12
0
1
681

這可能是一個(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
    },

P粉550823577
P粉550823577

全部回覆(1)
P粉006847750

你的問題似乎有兩個(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)容。

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板