정규식 이용해서 input 입력 값이 숫자만 들어가도록

년도와 월, 일은 4글자 2글자만 입력되도록 maxlength 이용

 

v-model로 값을 바인딩 후, watch에서 값이 변경되는 것을 체크하여 처리함.

 

template

<div class="flex justify-s items-c gap-6">
  <input
    id="birthYear"
    v-model="birthDt.year"
    maxlength="4"
    type="text"
    class="inp type-grow-1"
    placeholder="2024"
  >년
</div>
<div class="flex justify-s items-c gap-6">
  <input
    id="birthdt"
    v-model="birthDt.month"
    maxlength="2"
    type="text"
    class="inp type-grow-1"
    placeholder="01"
  >월
</div>
<div class="flex justify-s items-c gap-6">
  <input
    id="birthDd"
    v-model="birthDt.date"
    maxlength="2"
    type="text"
    class="inp type-grow-1"
    placeholder="01"
  >일
</div>
</div>

 

script

export default {
  data () {
    return {
      birthDt: {
        year: null,
        month: null,
        date: null,
      },
    };
  },
  watch: {
    'birthDt.year': {
      handler (newValue) {
        if(newValue !== null && newValue !== '') {
          this.birthDt.year = newValue.replace(/[^0-9]/g, '');
        }
      },
      immediate: true,
    },
    'birthDt.month': {
      handler (newValue) {
        if(newValue !== null && newValue !== '') {
          this.birthDt.month = newValue.replace(/[^0-9]/g, '');
        }
      },
      immediate: true,
    },
    'birthDt.date': {
      handler (newValue) {
        if(newValue !== null && newValue !== '') {
          this.birthDt.date = newValue.replace(/[^0-9]/g, '');
        }
      },
      immediate: true,
    },
  },