[Udemy Vue 완벽가이드 Section16] 248. 연락처 양식 작업하기

Coach부분은 잘 구현했다.

이제 Requests로 넘어가보자.

 

form요소를 만들어보자. 

그리고 이 양식에는 두 개의 입력값을 제공하자.

1/ 코치가 유저에게 연락할 방법을 알려주기위한 유저 이메일주소(email)

2/ 코치에게 전할 메시지 적는 곳(message)

 

<template>
  <form @submit.prevent="submitForm">
    <div class="form-control">
      <label for="email">Your E-Mail</label>
      <input type="email" id="email" />
    </div>
    <div class="form-control">
      <label for="message">Message</label>
      <textarea rows="5" id="message" />
    </div>
    <div class="actions">
      <base-button>Send Message</base-button>
    </div>
  </form>
</template>

 

 

 

email과 message에 대한 입력값을 가져와야한다.

유효성 검사도 추가하자. 유효성 검사 자체는 있는 편이 좋다.

methods: {
  submitForm() {
    console.log('this.$route', this.$route.params.id);
    this.formIsValid = true;
    if (this.email === '' || !this.email.includes('@') || this.message === '') {
      this.formIsValid = false;
      return; // 반환하여 나머지 메서드가 실행되지 않도록!
    }
  },
},

 

 

input과 textarea를 양방향 바인딩으로 email, message에 바인딩해서 키가 입력될 때마다 업데이트되도록 해보자.

<template>
  <form @submit.prevent="submitForm">
    <div class="form-control">
      <label for="email">Your E-Mail</label>
      <input type="email" id="email" v-model.trim="email" />
    </div>
    <div class="form-control">
      <label for="message">Message</label>
      <textarea rows="5" id="message" v-model.trim="message" />
    </div>
    <p class="errors" v-if="!formIsValid">
      Please enter a valid email and non-empty message.
    </p>
    <div class="actions">
      <base-button>Send Message</base-button>
    </div>
  </form>
</template>

 

CoachRegistration에서 한 것 보다는 덜 복잡한 유효성 검사.

하지만 이 역시도 유효성 검사에 충분하다.

 

 

코치가 받은 모든 request들은 "Requests" 페이지에 표시되어야 한다.

request들이 Vuex로 관리하게 될 또 다른 데이터 조각이다.

 

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