[Vue] v-model

v-model

input의 값을 처리하기 위해서 v-bind + v-on한 버전

input의 type에 따라 value 값의 타입을 자동으로 변환해준다.

<input id="age" name="age" type="number" v-model="userAge" ref="ageInput"/>
<script>
export default {
  data() {
    return {
      userName: '',
      userage: null,
    };
  },
  methods: {
    submitForm() {
      console.log(`UserName : ${this.userName}`);
      this.userName = '';
      console.log('User age:');
      console.log(this.userAge + 5); // number
      console.log(31);
      this.userAge = null;
      console.log(this.$refs.ageInput.value + 5); // string
    }
  }
}
</script>

v-model은 modifier도 제공한다.

lazy

기본적으로 v-model은 각 입력 이벤트 후 입력과 데이터를 동기화하는데 lazy 옵션을 사용하면 change 이벤트 이후에 동기화할 수 있다.

number

value를 number로 변환해줌

(parseFloat()로 변환되지 않는 값일 경우 원래 값을 리턴해줌)

trim

시작과 뒤의 공백을 제거해줌

Custom Form 만들기

v-model 은 v-bind와 v-on 의 숏컷이기 때문에 props와 emits를 이용하면 커스텀 폼에서도 v-model로 상태 값을 연결할 수 있다.

RatingControl.vue

<template>
  <ul>
    <li :class="{active : modelValue === 'poor'}">
        <button type="button" @click="activate('poor')">Poor</button>
    </li>
    <li :class="{active : modelValue === 'average'}">
        <button type="button" @click="activate('average')">Average</button>
    </li>
    <li :class="{active : modelValue === 'great'}">
        <button type="button" @click="activate('great')">Great</button>
    </li>
  </ul>
</template>
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],

  computed: {
    activeOption() {
      return this.modelValue;
    }
  },
  methods: {
    activate(option) {
      this.$emit('update:modelValue', option);
    }
  }
}
</script>
<style scoped>
.active {
  border-color: #a00078;
}

.active button {
  color: #a00078;
}
ul {
  list-style:none;
  margin: 0.5rem 0;
  padding: 0;
  display: flex;
}

li {
  margin: 0 1rem;
  border: 1px solid #ccc;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  font: inherit;
  border: none;
  background-color: transparent;
  cursor: pointer;
}


</style>

TheForm.vue (parent)

<template>
  <form @submit.prevent="submitForm">
    <div class="form-control" >
      <rating-control v-model="rating"></rating-control>
    </div>
  </form>
</template>

<script>
export default {
  components: {
    RatingControl,
  },
  data() {
    return {
      userName: '',
      userage: null,
      referrer: 'wom',
      interest: [],
      how: null,
      confirm: false,
      userNameValidity: 'pending',
      rating: null,
    };
  },
<script>