ユーザーが vue アプリケーションに登録できるようにする簡単な登録エンドポイントがあります。また、バックエンドから vue クライアントに適切なエラーを表示したいと考えています。
エラーの JSON 構造は次のとおりです:
リーリー次のようなレジスタ関数を持つコンポーザブルがあります:
リーリーまた、v-models が追加された単純なフォームであるフォーム コンポーネントもあります。 リーリー
私のコンポーザブルでは、次のようにエラー応答をログアウトできますエラー応答
フォームコンポーネントでエラーの登録を解除しようとしましたが、空のオブジェクトが返されるだけです (コンポーザブルでこのエラーオブジェクトを処理するためにリアクティブを使用しています)
コンポーザブルアイテムからの空のオブジェクト応答
オブジェクトではなく配列を返しているようです。
したがって、アクセスするには、
errors[0].Password
を実行する必要があります。オブジェクトを使用しますか? それとも配列を使用しますか (複数のエラーがある場合に役立つ可能性があります)?
配列が予期されており、すべてのエラーについて
Password
プロパティをチェックする必要がある場合は、次のようなことを実行します。 リーリーコードを振り返ってみる
この内容には複数の誤りがあるため、お客様のニーズに合った簡潔な回答を提供することが困難です。代わりに、原則に従って機能するコードスニペットを簡単にまとめました。今後、注意すべき点を明らかにし、将来に向けた良いアドバイスを提供したいと考えています。
-
の応答を待ちます。async function()
を使用して、Promise
悪い (結果をすぐに使用したい場合は、現在
リーリーconsole.log
でasync
を使用していることがわかります)これはすぐには結果が得られません。別のスレッドで実行するには時間がかかります。その結果、JavaScript スクリプトはほぼ即座に処理を進めます。応答がまだ到着していないために結果をすぐに使用したい場合、通常、これはエラーになります。
したがって、
######### わかりました### リーリーerrors
の新しい結果にアクセスしようとすると、console.log
の後でも 1 ~ 2 秒後には空であることがわかります。空ではなくなります。register()
が実行されました。Wait
- プロセスが終了するまで待ちます- MDN ドキュメント
非同期関数 - 必要なもの
await
の使用 - MDN ドキュメント
- VueJS で
ref() を使用するにはどうすればよいですか?1.
ref()、
reactive()、
######### 良くない### リーリー ######### わかりました### リーリーcompulated()
などの保存された値を変更できない変数に保存します。 。これらの変数を宣言するときは、常に const を使用してください。詳細情報
- StackOverflow Answers2. あるインスタンスでは
.valueサフィックスを使用していますが、別のインスタンスでは使用していません。つまり、ref() 変数の結果は常に
.valueに格納されます。それに応じて操作できます。 ######### 良くない### リーリー ######### わかりました### リーリー
ref()
の使い方- VueJS ドキュメント
概要ロジックを含むサンプルコード
コードをよりよく理解するために、これらの行をコメント化しました。これは理解できると思います。
リーリー リーリー リーリー