Vue3 기초: form data 다루기

웹어플리케이션에서 form을 이용한 데이터 바인딩은 필수적인 기술이라고 할 수 있다.

이를 통해야만 기본적인 로그인, 회원가입 등이 가능하기 때문이다. 또한, 클라이언트가 무엇을 원하는지를 서버가 알수있는 창구가 되어주기 때문에  form을 이용한 data다루기는 선택이 아닌 필수이다!

 

다행히 Vue에서 form data는 비교적 다루기 쉽다.

 

Vue에서 제공하는 v-model을 input 태그에 달아주면 Vue가 알아서 양방향 바인딩(컴포넌트의 프로퍼티의 값을 바꿔줌과 동시에 view에 출력되는 값도 바뀐다.)을 해준다.

 

<template>
  <div>
    {{ user }}
    
    <form>
      <div>
        <label for="name">이름</label>
        <input type="text" id="name" v-model="user.name" />
      </div>
      <div>
        <label for="age">나이</label>
        <input type="number" id="age" v-model="user.age" />
      </div>
     </form>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      user: {
        name: "kj",
        age: 0,
      },
    };
  },
  methods: {},
};
</script>

<style></style>

위와 같은 코드로 vue 서버를 올려보면 아래와 같은 화면을 볼 수 있다.

 

이름 옆의 input 창에서 이름을 바꾸면 위에 출력된 user 프로퍼티의 값도 함께 바뀌는 것을 확인할 수 있다.

 

 

input type=select 도 마찬가지로 v-model을 이용하여 양방향 바인딩이 가능하다.

<template>
  <div>
    {{ user }}
    <form>
      <div>
        <label for="name">이름</label>
        <input type="text" id="name" v-model="user.name"/>
      </div>
      <div>
        <label for="age">나이</label>
        <input type="number" id="age" v-model="user.age" />
      </div>
      <div>
        <label for="city">사는 곳</label>
        <select id="city" v-model="user.city">
          <option value="undefined">선택</option>
          <option value="seoul">서울</option>
          <option value="daejeon">대전</option>
          <option value="daegu">대구</option>
          <option value="busan">부산</option>
        </select>
      </div>
      <div>
        <label for="favorite-food">좋아하는 음식</label>
        <select id="favorite-food" multiple v-model="user.favorite">
          <option v-for="option in foodOptions"
            :key="option.code"
            :value="option.code"
          > {{ option.label }} </option>
        </select>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      foodOptions: [
        { label: "짜장면", code: "JJ" },
        { label: "짬뽕", code: "JB" },
        { label: "탕수육", code: "TS" },
      ],
      user: {
        name: "kj",
        age: 0,
        city: undefined,
        favorite: undefined,
        job: [],
      },
    };
  },
  methods: {},
  },
};
</script>

<style></style>

위의 코드를 보면 사는 곳 select는 하드코딩을 한 경우이고 좋아하는 음식 select는  이전에 공부했던  v-for를 이용하여 반복문으로 option들을 생성하였다.

 

기억이 안나거나 해당 포스트를 보지 못했던 분들은 아래 링크를 클릭하여 확인할 수 있다.

https://webdev-sombba.tistory.com/27

Vue3 기초: 리스트 렌더링

선택한 옵션에 따라서 프로퍼티에 잘 바인딩되는 것을 확인할 수 있다.

 

체크박스나 라디오버튼도 다음과 같이 구현해주면 된다.

 

<template>
  <div>
    {{ user }}
    <!-- <h1>{{ user.name }}</h1> -->
    <form>
      <div>
        <label for="name">이름</label>
        <input type="text" id="name" v-model="user.name" />
      </div>
      <div>
        <label for="age">나이</label>
        <input type="number" id="age" v-model="user.age" />
      </div>
      <div>
        <label for="city">사는 곳</label>
        <select id="city" v-model="user.city">
          <option value="undefined">선택</option>
          <option value="seoul">서울</option>
          <option value="daejeon">대전</option>
          <option value="daegu">대구</option>
          <option value="busan">부산</option>
        </select>
      </div>
      <div>
        <label for="favorite-food">좋아하는 음식</label>
        <select id="favorite-food" multiple v-model="user.favorite">
          <option
            v-for="option in foodOptions"
            :key="option.code"
            :value="option.code"
          >
            {{ option.label }}
          </option>
        </select>
      </div>
      <div>
        <label for="job"></label>
        프로그래머
        <input type="checkbox" value="programmer" v-model="user.job" /> 가수
        <input type="checkbox" value="singer" v-model="user.job" /> 교사
        <input type="checkbox" value="teacher" v-model="user.job" />
      </div>
      <div>
        <label for="gender">성별</label>
        남<input type="radio" name="" value="male" v-model="user.gender" />
        여<input type="radio" name="" value="female" v-model="user.gender" />
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      foodOptions: [
        { label: "짜장면", code: "JJ" },
        { label: "짬뽕", code: "JB" },
        { label: "탕수육", code: "TS" },
      ],
      user: {
        name: "kj",
        age: 0,
        city: undefined,
        favorite: undefined,
        job: [],
      },
    };
  },
  methods: {
   
  },
};
</script>

<style></style>

 

단, job과 같은 checkbox의 경우 프로퍼티에서 배열로 초기화를 해주지 않으면 아래 그림과 같이 모든 체크박스가 함께 선택이되고 값은 true 혹은 false의 Boolean 값으로 돌려받게 된다.

 

따라서 checkbox를 사용하는 경우 프로퍼티에 초기화를 반드시 해주어야 의도대로 동작한다는 것을 명심하자!

 

마지막으로 input:text 에 한글을 입력하면 완성된 글자를 입력하기 전에 출력이 안되는 기이한 현상을 볼 수 있다.

 

위 현상은 IME와 관련된 이슈인데, 아직 뷰에서는 해결되지 않은 이슈사항이므로 따로 메서드를 정의하여 프로퍼티의 값을 바로바로 수정하도록 바꿔보자.

 

Vue에서 메서드를 태그에 바인딩할때는 v-on:이벤트명="메서드명" 이런 형식으로 작성을 해주는데, 앞의 v-on을 대체하여 @로 작성해줄 수 있다.

 

<template>
  <div>
    {{ user }}
    <h1>{{ user.name }}</h1>
    <form>
      <div>
        <label for="name">이름</label>
        <input type="text" id="name" v-model="user.name" @input="setValue"/>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      user: {
        name: "kj",
        age: 0,
        city: undefined,
        favorite: undefined,
        job: [],
      },
    };
  },
  methods: {
    setValue(e) {
      this.user.name = e.target.value;
    },
  },
};
</script>

<style></style>

 

위와 같이 setValue 라는 메서드를 정의하고 발생하는 event 객체를 e라는 인자로 받아와서 e.target.value(입력한 값)을 user.name에 바로 할당해주도록 하자.

 

그리고 이름을 넣어주는 input:text 창에 @input="setValue"를 적어주어 메서드를 해당 태그에 바인딩해준다.

 

그러면 다음과 같이 한글자를 입력할 때마다 프로퍼티의 값이 잘 바뀌는 것을 확인할 수 있다.