使用PATCH請求連結將VueJS中的MongoDB產品欄位進行編輯

Question

這可能是一個簡單的問題，但由於某種原因，我無法弄清楚:(。 我正在使用 MongoDB、NestJS 和 VueJS 製作一個全端應用程序，該應用程式包含在 MongoDB 資料庫中添加不同產品的表單。

我現在面臨的問題是我希望能夠使用以下邏輯編輯資料庫中存在的每個產品： 點擊編輯按鈕 -> 在彈出視窗中填寫更新資訊 -> 點擊更新按鈕

範例：

我現在面臨的問題是無法只選擇我嘗試編輯到 VueJS 應用程式中的特定產品。

更準確地說，我想我需要一種方法來取得 ID，例如：

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

編輯功能有效。如果代替 ${this.produsModificat.id}

我使用 http://localhost:3000/produse/61a51cecdfb9ea1bd939587b 它有效。

所以我想做的是在點擊「編輯」按鈕時自動取得 ID。

我試圖透過 MongoDB 中產生的唯一 ID 來選擇每個產品（例如，請參見下圖），但我找不到方法來做到這一點，這讓我抓狂:(。

有人可以指出我如何實現這一目標的正確方向嗎？

下面您可以找到我在前端文件中為 PATCH 請求實現的邏輯

檔名：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

你的問題似乎有兩個面向。第一個是如何從 MongoDB 取得唯一 ID，然後如何在前端追蹤補丁請求的唯一 ID。

在第一部分中，請查看您正在使用的任何產品的文檔中的 getter 和 setter（或修改器和存取器）。尋找一種方法來修改回應物件（表記錄的主獲取請求中的資料集合）上的 ID 屬性，或定義您自己的屬性並取得所需 ID 的字串屬性。當您定義要使用您控制的產品時，您也可以在每個產品模式上定義自己的product_id。然後，傳回該自訂唯一屬性並使用它來追蹤和尋找使用者想要編輯的項目。

如果您已經涵蓋了所有內容，並且需要在前端提供一些建議，並且您有一個獨特的ID 來跟踪每個項目，請為模式創建一個子組件，該模式將通過單擊操作打開編輯按鈕。此組件將透過過濾產品數組來接收相關的產品物件。

在模態元件中，您擁有編輯相關產品的所有邏輯。如果您的後端允許路由模型綁定，如果不使用後端框架設定的預設 ID，請將綁定金鑰更新為您的唯一 ID。

您可以透過多種方式儲存「active_record」或使用者目前正在查看或使用的項目。您可以透過 prop 將該 ID 傳遞給模態元件，或者將所有業務邏輯保留在 Table.vue 中，並透過模態中的發出事件傳遞更改，然後讓 Table.vue 處理與後端的通訊。您可以在 Table.vue 和 ProductEditModal.vue 中的一個或兩個中追蹤活動項目的狀態。

對於您關於編輯按鈕需要唯一產品 ID 的觀點，只需將產品 ID 作為屬性提供給編輯按鈕即可。

使用 v-for 以您選擇的任何方式渲染表行，您都可以定義編輯按鈕。其中，item.id 可以是您想要的任何內容，也可以是追蹤活動項目的其他方式。

然後，讓你的模態a) 在EditButton 元件內部，其中該模態接收有問題的項目並保存axios 邏輯，或者b) 使用Table.vue 中的方法打開你的模態並為其提供活動的透過openModal 方法記錄。許多知名的開發人員實際上會將模態邏輯放在編輯按鈕本身內部，例如編輯按鈕「擁有」編輯模式。或者，使用編輯按鈕觸發模式開啟並簡單地傳遞它需要的所有內容。