VueJS はフォーム コンポーネントの API 呼び出しのエラーを処理します
P粉964682904
P粉964682904 2023-09-06 22:01:08
0
2
568

ユーザーが vue アプリケーションに登録できるようにする簡単な登録エンドポイントがあります。また、バックエンドから vue クライアントに適切なエラーを表示したいと考えています。

エラーの JSON 構造は次のとおりです:

リーリー

次のようなレジスタ関数を持つコンポーザブルがあります:

リーリー

また、v-models が追加された単純なフォームであるフォーム コンポーネントもあります。 リーリー

私のコンポーザブルでは、次のようにエラー応答をログアウトできます

エラー応答

フォームコンポーネントでエラーの登録を解除しようとしましたが、空のオブジェクトが返されるだけです (コンポーザブルでこのエラーオブジェクトを処理するためにリアクティブを使用しています)

コンポーザブルアイテムからの空のオブジェクト応答

P粉964682904
P粉964682904

全員に返信(2)
P粉576184933

オブジェクトではなく配列を返しているようです。

したがって、アクセスするには、errors[0].Password を実行する必要があります。

オブジェクトを使用しますか? それとも配列を使用しますか (複数のエラーがある場合に役立つ可能性があります)?

配列が予期されており、すべてのエラーについて Password プロパティをチェックする必要がある場合は、次のようなことを実行します。 リーリー

いいねを押す +0
P粉180844619

コードを振り返ってみる

この内容には複数の誤りがあるため、お客様のニーズに合った簡潔な回答を提供することが困難です。代わりに、原則に従って機能するコードスニペットを簡単にまとめました。今後、注意すべき点を明らかにし、将来に向けた良いアドバイスを提供したいと考えています。

- async function() を使用して、Promise

の応答を待ちます。
悪い (結果をすぐに使用したい場合は、現在 console.logasync を使用していることがわかります)
リーリー

これはすぐには結果が得られません。別のスレッドで実行するには時間がかかります。その結果、JavaScript スクリプトはほぼ即座に処理を進めます。応答がまだ到着していないために結果をすぐに使用したい場合、通常、これはエラーになります。

したがって、errors の新しい結果にアクセスしようとすると、console.log の後でも 1 ~ 2 秒後には空であることがわかります。空ではなくなります。 register() が実行されました。

######### わかりました### リーリー
Wait
- プロセスが終了するまで待ちます

- MDN ドキュメント 非同期関数 - 必要なもの
await の使用 - MDN ドキュメント - VueJS で ref() を使用するにはどうすればよいですか?

1.

ref()
reactive()

compulated() などの保存された値を変更できない変数に保存します。 。これらの変数を宣言するときは、常に const を使用してください。 詳細情報 - StackOverflow Answers

######### 良くない### リーリー ######### わかりました### リーリー

2. あるインスタンスでは

.value
サフィックスを使用していますが、別のインスタンスでは使用していません。つまり、ref() 変数の結果は常に
.value
に格納されます。それに応じて操作できます。 ######### 良くない### リーリー ######### わかりました### リーリー
ref()
の使い方

- VueJS ドキュメント 概要ロジックを含むサンプルコード コードをよりよく理解するために、これらの行をコメント化しました。これは理解できると思います。

リーリー リーリー リーリー
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート