[Udemy Vue 완벽가이드 Section16] 245. 코치 등록하기:양식

CoachRegistration.vue

이 컴포넌트는 이후에 HTTP요청을 추가하면 크기가 너무 커지므로 양식은 별개의 컴포넌트에서 아웃소싱하자.

coach폴더에 CoachForm파일을 만들어 이 파일에 실제 양식을 넣어준다.

 

 

양식에 firstName, lastName, areas, descript과 같은 입력 필드가 포함되어야 한다.

- h3대신 label태그를 써서 Firstname로 하고, for속성을 설정하여 id를 가리키도록 한다.

- description을 쓰는 곳에는 textarea태그를 사용해 여러 줄을 입력할 수 있도록 설정하자.

행(row)은 5로 지정하자.

- hourly rate는 type이 number이 되어야한다.

- 마지막으로 사용자들이 자신의 전문 분야를 선택할 수 있게 만들어야한다.

value도 추가한다. value는 이후에 체크박스를 검색하는데에 중요하게 쓰인다.

제출버튼이 될 <base-button>을 추가하고 Register을 입력한다.

기본양식을 완성했다.

<template>
 <form @submit.prevent="submitForm">
  <!--firstName-->
  <div class="form-control">
    <label for="firstname">Firstname</label>
    <input type="text" id="firstname" />
  </div>

  <!--lastName-->
  <div class="form-control">
    <label for="lastname">Lastname</label>
    <input type="text" id="lastname" />
  </div>

  <!--description-->
  <div class="form-control" :class="{ invalid: !description.isValid }">
    <label for="description">Description</label>
    <textarea
      id="description"
      rows="5"
      v-model.trim="description.val"
      @blur="clearValidity('description')"
    ></textarea>
    <p v-if="!description.isValid">Description must not be empty.</p>
  </div>

  <!--rate-->
  <div class="form-control">
    <label for="rate">Hourly Rate</label>
    <input type="number" id="rate" v-model.number="rate.val" />
  </div>

  <!--areas-->
  <div class="form-control">
    <h3>Areas of Expertise</h3>
    <input type="checkbox" id="frontend" value="frontend" />
    <label for="frontend">Frontend Development</label>
    <input
      type="checkbox"
      id="backend"
      value="backend"
      v-model="areas.val"
    />
    <label for="backend">Backend Development</label>
    <input
      type="checkbox"
      id="career"
      value="career"
      v-model="areas.val"
    />
  </div>
  <base-button>Register</base-button>
 </form>
</template>
<script>
export default {
  data() {
    return {
      firstName: {
        val: '',
        isValid: true,
      },
      lastName: {
        val: '',
        isValid: true,
      },
      description: {
        val: '',
        isValid: true,
      },
      rate: {
        val: null,
        isValid: true,
      },
      areas: {
        val: [],
        isValid: true,
      },
      formIsValid: true,
    };
  },
  methods: {
    submitForm() {
      if (!this.formIsValid) {
        return;
      }
      const formData = {
        first: this.firstName.val,
        last: this.lastName.val,
        desc: this.description.val,
        rate: this.rate.val,
        areas: this.areas.val,
      };
      console.log('formData', formData);
    },
  },
};
</script>

 

 

rate는 .number 수식어를 사용해서 숫자로 강제변환을 시킨다.

type을 number로 지정했으니 자동으로 숫자가 지정될테지만 만약을 위해서 강제 변환을 지정해두자.

그리고 다른 input의 v-model 뒤에는 .trim을 추가해 과도한 whitespace를 trim하자.

 

checkbox에도 input요소에 v-model로 areas를 바인딩하고, 다른 체크박스에서도 똑같이 설정한다. 모두 areas 프로퍼티에 속하므로.

 

양식에 제출될 때 트리거될 메서드를 추가해보자. @submitForm

.prevent 수식어를 붙여 존재하지 않는 서버에 자동으로 요청이 전송되는 것을 차단하자.

 

Register를 클릭해보면, 모든 필드가 비어있다.

 

input창에 입력하고 Register 클릭하면 아래와 같이 나온다.

areas는 반응형이어야 하니, Proxy로 래핑돼있다.

 

 

이제 CoachRegistration.vue으로 이 데이터들을 전달할 준비가 됐다.

이 데이터들을 사용해 Vuex 저장소에 새로운 코치를 생성해보자.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.