Ionic 및 Vue JS에 대한 내 책 보기

그래서 지난 주에 Vee-Validate 및 Vue3 과 함께 Ionic Framework new Vue Components 을 사용하는 방법에 대한 짧은 비디오를 만들었습니다.
누군가 나에게 Vuelidate를 사용하지 않은 이유를 물었습니다. 마지막으로 양식 유효성 검사가 필요했을 때 Vee-Validate 을 사용한 것 외에는 특별한 이유가 없었습니다.

그래서 여기서 내가 한 것은 이전 양식/양식 유효성 검사 게시물에서 동일한 예제를 재현하지만 이번에는 Vuelidate 을 사용하는 것입니다.

게시물 끝에 있는 코드를 확인하고 내

설정

We are assuming you already have a vue3 project.

라이브러리 설치

npm install @vuelidate/[email protected]
npm install @vuelidate/[email protected]

Typescript를 사용하고 있기 때문에 shims-vue.d.ts에서 이 변경을 수행해야 했습니다.

declare module '@vuelidate/core';
declare module '@vuelidate/validators';

내 양식 필드 설정

먼저 내 구성 요소의 스크립트 영역에서 라이브러리를 가져옵니다.

import { useVuelidate } from "@vuelidate/core";
import { required, email } from "@vuelidate/validators";

설정 기능에서 양식 필드를 정의할 수 있습니다.

// set fields and some initial values
const fform = reactive({
  title: "",
  body: "",
  emailAddress: "",
  gender: "MALE",
  save: true,
});

다음으로 가져온 vuelidate의 규칙을 사용하여 규칙을 필드에 매핑합니다.

const rules = {
  title: { required },
  body: { required },
  emailAddress: { required, email },
  gender: {},
  save: {},
};

useVuelidate 후크를 사용하여 이 모든 것을 Vuelidate 개체에 바인딩합니다. 원래는 이 모든 것을 피하기 위해 ref를 사용할 수도 있었지만 저는 여러 필드가 아닌 양식 개체로 작업하는 것을 좋아합니다.

Ref & Reactive:

• ref() takes a primitive value and returns a reactive and mutable ref object
• reactive() takes an object and returns a reactive proxy of the original

const vv = useVuelidate(rules, {
  title: toRef(fform, "title"),
  body: toRef(fform, "body"),
  emailAddress: toRef(fform, "emailAddress"),
  gender: toRef(fform, "gender"),
  save: toRef(fform, "save"),
});

사용자가 양식을 제출할 때 처리할 함수가 필요합니다. 이 상황에서 우리는 먼저 vv.value.$touch()를 사용하여 양식의 유효성 검사를 트리거합니다. 오류가 있으면 종료하고 양식을 제출하지 않습니다.

// handle the submit of the form, only called
// if the form is valid
const onSubmit = () => {
  vv.value.$touch();

  if (vv.value.$invalid) return;

  alert("Form Submitted " + JSON.stringify(fform, null, 2));
};

setup 메서드를 사용하고 있으므로 템플릿에서 액세스할 수 있도록 적절한 함수와 속성을 반환해야 합니다.

return {
  router: useRouter(),
  onSubmit,
  vv,
};

내 양식 템플릿 설정

내 양식에는 몇 개의 필드가 있고 Ionic 구성 요소를 사용하고 있기 때문에 처음에는 추가 작업을 수행해야 하지만 그럴 필요가 없었습니다.
model 호출에서 반환된 vv 개체를 사용하여 생성한 필드와 연결된 useVuelidate에 액세스할 수 있습니다. 우리는 이러한 모델을 우리 양식에 사용합니다.

<ion-item>
  <ion-label>Title</ion-label>
  <ion-input type="text" name="title" v-model="vv.title.$model" />
</ion-item>

양식 초기값

좋은 점은 vue 바인딩으로 작업하고 있기 때문에 양식 필드에 설정한 초기 값이 모델을 통해 전달되어 입력 요소로 설정된다는 것입니다.

<ion-item>
  <ion-label>Gender</ion-label>
  <ion-select name="gender" v-model="vv.gender.$model">
    <ion-select-option>MALE</ion-select-option>
    <ion-select-option>FEMALE</ion-select-option>
  </ion-select>
</ion-item>

See above where we setup form object

양식 제출

양식을 제출하는 데 특별한 마법은 없으며 함수를 호출하고 오류를 확인하기만 하면 됩니다. 오류가 있으면 렌더링할 수 있습니다.

<form @submit.prevent="onSubmit" novalidate>
 ...
</form>

양식 필드 오류

양식 필드에는 연관된 오류 개체가 있으며 필드 이름과 vuelidate 개체를 사용하여 오류에 액세스할 수 있습니다.
아래 코드는 이름이 지정된 입력 요소title와 연결된 첫 번째 오류 메시지를 렌더링합니다.

<p>{{ vv?.title?.$errors[0]?.$message }}</p>

마무리

이것은 Vuelidate에 대한 간략한 설명이었습니다. 제가 작업하고 있는 블로그 게시물인 Modal Form 비디오와 함께 양식 및 양식 유효성 검사 기능을 사용하여 더 자세히 알아볼 것입니다. 이 예제에서는 중첩된 개체와 더 복잡한 UI를 사용할 것이므로 어떻게 작동하는지 보는 것이 흥미로울 것입니다.

소스 코드

아론크사운더스 / ionic-vue-validation-app

vue3 및 이온 형태 검증 예제를 보여주는 샘플 앱

ionic-vue-validation-app

vue3 및 이온 형태 검증 예제를 보여주는 샘플 앱

vuelidate - https://vuelidate-next.netlify.app/#installation

vee-validate - https://vee-validate.logaretm.com/v4/

아이오닉 뷰 - https://ionicframework.com/blog/announcing-the-new-ionic-vue-beta/

IONIC VUE3 동영상 보기

View on GitHub

이온 Vue 비디오