[Vue] Vue의 기초(6) - 이벤트리스너 v-model, watcher

 이벤트리스너

 

<input>에 입력한 값을 데이터로 저장하려면 <input @input="$event.target.value"> 사용자 입력 값을 저장하기 위해 <script>에 data에 변수를 만들어 준다.

HTML요소.addEventListner('click', function(e){ e.target (내가 클릭한 요소를 뜻함) })

$event는 e라는 파라미터와 동일한 역할을 한다.

 

<template>
  <div class="black-bg" v-if="modal == true">
      <input @input="month = $event.target.value">
      <p> {{month}}개월 : {{oneroom[clicked].price * month}} 원</p>
      <button @click="$emit('closeModal')">닫기</button>
  </div>
</template>

<script>
export default {
    name : 'Modal',
    data(){
        return {
            month : 1,
        }
    },
    props : {
        oneroom : Array,
        clicked : Number,
        modal : Boolean,
    }
}
</script>

 

v-model

 

@input="month = $event.target.value">를 v-model을 이용해서 축약할 수 있다. (@input, @onchange...)

사용자가 <input>에 입력한 것은 전부 문자자료형이기 때문에 숫자로 변경시켜주려면 v-model.number로 해주면 된다.

 

<template>
  <div class="black-bg" v-if="modal == true">
      <input v-model.number="month">
      <p> {{month}}개월 : {{oneroom[clicked].price * month}} 원</p>
      <button @click="$emit('closeModal')">닫기</button>
  </div>
</template>

<script>
export default {
    name : 'Modal',
    data(){
        return {
            month : 1,
        }
    },
    props : {
        oneroom : Array,
        clicked : Number,
        modal : Boolean,
    }
}
</script>

 

 watcher

 

input에 문자입력하면 경고문을 띄우고 싶을 때 data를 감시하는 함수인 watcher를 쓰면 된다. <script>에 watch:{}. 데이터 감시하려면 watch:{ 감시할데이터(){} }. 특정 데이터가 변경될 때마다 실행되는 코드.

 

<script>
export default {
    data(){
        return {
            month : 1,
        }
    },
    watch : {
        month(a){ // a는 month가 변화될 값
            if (a>=13){
                alert('13이상 입력하지 마세요!')
            }
        }
    },
}
</script>

month(a, b)라면 a는 변경 후 데이터를 가리키고 b는 변경 전 데이터를 말한다.

 

<input>에 글자 입력하면 alert()를 띄우려면 v-model.number를 활용하거나 typeof 라는 키워드 옆에 자료를 입력하면 문자면 'string' 숫자면 'number' 이런 식으로 문자가 나오는 것을 활용하면 된다. 그리고 isNaN() 안에 숫자를 입력하면 false, 글자를 입력하면 true가 나온다.

 

watch : {
    month(a){
      if (isNaN(a) == true){
        alert('문자입력하지마라');
        this.month = 1;
      }
    },
 },

 

Vue전용 form validation 라이브러리를 사용하면 쉽게 제약사항을 줄 수 있다.