PATCH リクエスト リンクを使用して VueJS で MongoDB 製品フィールドを編集する

Question

これはおそらく単純な質問ですが、何らかの理由で理解できません:(。 MongoDB、NestJS、VueJS を使用して、MongoDB データベースにさまざまな製品を追加するためのフォームを含むフルスタック アプリケーションを作成しています。

私が現在直面している問題は、次のロジックを使用してデータベース内に存在するすべての製品を編集できるようにしたいということです。 編集ボタンをクリック -> ポップアップウィンドウに更新情報を入力 -> 更新ボタンをクリック

＃＃＃例：

私が現在直面している問題は、VueJS アプリケーションで編集しようとしている特定の製品のみを選択できないことです。

より正確に言うと、ID を取得する方法が必要だと思います。例:

リーリー

編集機能は有効です。代わりに ${this.produsModificat.id}

の場合

http://localhost:3000/produse/61a51cecdfb9ea1bd939587b を使用しましたが、うまくいきました。

それでは、「編集」ボタンをクリックしたときにIDを自動的に取得したいと考えています。

MongoDB で生成された一意の ID で各製品を選択しようとしています (たとえば、以下の画像を参照) が、その方法が見つからず、頭がおかしくなってしまいました :(.

誰かがこれを達成するための正しい方向を教えてくれませんか?

以下に、フロントエンド ファイルの PATCH リクエスト用に実装したロジックを示します。

ファイル名: Table.vue

ああああ

Answer 1

あなたの問題には 2 つの側面があるようです。 1 つ目は、MongoDB から一意の ID を取得する方法、次にフロントエンドでパッチ リクエストの一意の ID を追跡する方法です。

最初の部分では、使用している製品のドキュメントでゲッターとセッター (または修飾子とアクセサー) を確認します。応答オブジェクト (テーブル レコードのメインの取得リクエスト内のデータ コレクション) の ID プロパティを変更する方法を見つけるか、独自のプロパティを定義して目的の ID の文字列プロパティを取得します。自分が制御する製品を定義するときに、各製品スキーマで独自の product_id を定義することもできます。次に、そのカスタムの一意のプロパティを返し、それを使用してユーザーが編集したい項目を追跡および検索します。

すべてをカバーしており、フロントエンドでいくつかの提案が必要で、各アイテムを追跡するための一意の ID がある場合は、シングル クリック アクションで編集ボタンを開くモーダルのサブコンポーネントを作成します。このコンポーネントは、製品配列をフィルタリングすることによって、関連する製品オブジェクトを受け取ります。

モーダル コンポーネントには、関連商品を編集するためのすべてのロジックが含まれています。バックエンドでルーティング モデルのバインドが許可されている場合、バックエンド フレームワークによって設定されたデフォルト ID を使用していない場合は、バインド キーを一意の ID に更新します。

ユーザーが現在表示または使用している「active_record」またはアイテムは、いくつかの方法で保存できます。その ID をプロップ経由でモーダル コンポーネントに渡すことも、すべてのビジネス ロジックを Table.vue に保持し、モーダルで発行されたイベント経由で変更を渡し、Table.vue にバックエンドとの通信を処理させることもできます。 Table.vue と ProductEditModal.vue の一方または両方でアクティブなアイテムのステータスを追跡できます。

編集ボタンに一意の製品 ID が必要であるという点については、編集ボタンの属性として製品 ID を指定するだけです。

v-for を使用すると、任意の方法でテーブル行をレンダリングでき、編集ボタンを定義できます。 item.id には、任意の値を指定することも、アクティブなアイテムを追跡するその他の方法を指定することもできます。

リーリー

次に、モーダルを a) モーダルが問題の項目を受け取り、axios ロジックを保持する EditButton コンポーネント内に置くか、または b) Table.vue のメソッドを使用してモーダルを開いて提供します。アクティビティは、 openModalメソッド。多くの評判の良い開発者は、編集ボタンが編集モードを「所有」するように、実際に編集ボタン自体の中にモーダル ロジックを組み込んでいます。あるいは、編集ボタンを使用してモーダルを開き、必要なものをすべて渡すだけです。