VueJS는 양식 구성 요소의 API 호출 오류를 처리합니다.

Question

사용자가 내 Vue 앱에 등록할 수 있도록 허용하는 간단한 등록 엔드포인트가 있고, 내 백엔드에서 Vue 클라이언트에 적절한 오류를 표시하고 싶습니다.

오류 JSON 구조는 다음과 같습니다:

으아악

다음과 같은 등록 기능이 있는 컴포저블이 있습니다.

으아악

또한 v-모델이 추가된 단순한 양식인 양식 구성요소도 있습니다.

으아악

내 컴포저블에서는 다음과 같이 오류 응답을 로그아웃할 수 있습니다

오류 응답

양식 구성요소에서 오류 등록을 취소하려고 했지만 이제는 빈 객체만 얻습니다(컴포저블에서 이 오류 객체를 처리하기 위해 반응형을 사용하고 있습니다)

구성 가능한 항목의 빈 개체 응답

Answer 1

객체가 아닌 배열을 반환하는 것 같습니다.

액세스 권한을 얻으려면 errors[0].Password을 수행해야 합니다.

객체를 사용할 예정인가요, 아니면 배열을 사용할 예정인가요?(오류가 여러 개인 경우 유용할 수 있음)

배열이 예상되고 모든 오류에 대해 Password 속성을 확인해야 하는 경우 다음과 같이 수행합니다.

으아악

Answer 2

코드를 반영하세요

오류가 많아 귀하의 요구에 맞는 간결한 답변을 드리기 어렵습니다. 대신에 귀하의 원칙에 따라 작동하는 코드 조각을 빠르게 구성했습니다. 앞으로는 주의해야 할 점을 강조하고 미래를 위한 좋은 조언을 제공하도록 노력하겠습니다.

- async function()可以等待Promise

을 사용한 응답

좋지 않음 (현재 console.log 证明使用async 결과를 즉시 사용하려는 경우)

으아악

즉시 결과를 제공하지는 않습니다. 별도의 스레드에서 실행하는 데 시간이 걸립니다. 결과적으로 JavaScript 스크립트는 거의 즉시 앞으로 나아갑니다. 일반적으로 응답이 아직 도착하지 않았기 때문에 결과를 즉시 사용하려는 경우 오류가 발생합니다.

그래서 접속을 시도하면 errors 的新结果时，您会看到它是空的，即使在 console.log 之后，1-2 秒后，它不会再为空，因为 register()이미 실행된 것입니다.

알았어

으아악

等待 - 프로세스가 끝날 때까지 기다리기 - MDN 문서
异步函数 - 需要什么await 사용 - MDN 문서

- VueJS에서 ref()를 어떻게 사용하나요?

1.

ref()、reactive()、compulated(), reactive(), compulated() 등으로 저장된 값을 수정할 수 없는 변수에 저장합니다. 이러한 변수를 선언할 때는 항상 const를 사용하십시오.

추가 정보 - StackOverflow 답변

좋지 않아요

으아악

알았어

으아악

2.

한 인스턴스에서는 .value 접미사를 사용하고 다른 인스턴스에서는 사용하지 않습니다. .value 后缀，而在另一实例中则不使用。嗯，情况是 ref() 变量的结果始终存储在 .value 변수의 결과는 항상 .value에 저장됩니다. 그에 맞게 조작하시면 됩니다.

좋지 않아요

으아악

알았어

으아악

사용 방법ref()? - VueJS 문서

---

논리 개요가 포함된 샘플 코드

코드를 더 잘 이해하기 위해 이 줄에 주석을 달았습니다. 이것이 이해할 수 있기를 바랍니다.

으아악 으아악 으아악