watcher로 데이터 감시하는 법

https://codingapple.com/course/vue-js/

인스타그램을 만들며 배워보는 Vue.js 3 완벽 가이드 - 코딩애플 온라인 강좌

 

사용자가 <input>에 입력한 데이터는 무조건 문자입니다. 

123 이렇게 입력해도 '123' 이렇게 됩니다. 

이걸 강제로 숫자로 바꾸고 싶으면 v-model.number="데이터이름" 이것만 장착해주면

데이터로 저장될 때 숫자자료로 바꿔서 저장됩니다. 

 

하지만 'abc' 문자를 인풋에 입력하는걸 막을 순 없습니다. 

이걸 막고 싶으면 watcher를 써봅시다.

 

watch : {} 라는 항목을 신설해서 거기다가 작성해주시면 되며

어떤 데이터를 계속 감시하는 역할을 하는 코드를 적을 수 있습니다. 

 

감시한다는게 어려운건 아니고

그냥 특정 데이터가 변경될 때마다 실행되는 코드를 여기 적을 수 있습니다.

그게 감시죠 뭐 

 

 

 

 

 

데이터를 감시하고 싶으면 watch

data가 제대로 변하는지, 이상한게 들어오지 않는지, 특히 사용자의 input을 받는다면 필수적입니다.

 

그래서 Modal.vue에 이렇게 작성해보십시오 

export default {
  data(){
    return {
      month : 1
    }
  },
  watch : {
    month(){
      //month가 변경될 때 실행할 코드
    }
  }
}

watch 라는 항목에 감시자들을 만들 수 있습니다. 정해져있음

그리고 여기엔 함수를 집어넣을 수 있는데

함수명을 특이하게도 내가 감시하고 싶은 데이터명으로 작명하셔야합니다.

month() 이렇게 지으면 month 데이터 감시자가 되는 것임

그리고 그 함수안에 month가 변할 때마다 실행하고 싶은 코드를 적어주면 완성입니다.

참고로 month(a) 안에 파라미터 아무거나 작명해서 사용가능한데

그 파라미터는 month가 변경될 값을 의미합니다.

(두개까지 작명가능한데 첫째는 변경될 값, 둘째는 변경전 값을 의미합니다.)

 

 

 

 

Q. month 라는 데이터가 12보다 크게 변하면 경고문 띄우려면?

 

자바스크립트로 alert('안녕') 이렇게 쓰면 경고문을 띄울 수 있습니다.

알아서 대충 짜보고 눌러보십쇼

 

if 라고 아십니까 

 

** range Input

 

export default {
  data(){
    return {
      month : 1
    }
  },
  watch : {
    month(a){
      if (a > 12) {
         alert('13이상 입력하지마')
      }
    }
  }
}

 

이외에도 검사해야할 경우가 많습니다

 

이메일 형식을 입력했는지

숫자나 문자만 입력했는지

비번에 영어 대문자가 들어있는지

이런 것들을 검사해야하는데 이건 정규식을 잘하시거나

아니면 체크할게 너무 많으면 Vue 용 form validation 라이브러리를 쓰기도 합니다. 찾아보도록 합시다. 

https://ordinary-code.tistory.com/9

[Vue.js] 현업에서 잘 사용하는 Vue 무료 라이브러리 추천

 

🍎🍎

month라는 데이터 항목에 숫자가 아니라 문자가 들어오면 

"숫자만 입력하라"는 alert()창을 띄워주고 month의 초기값을 1로 다시 설정해봅시다.

 

 

 

오늘의 숙제 해설

isNaN() 안에 숫자를 입력하면 false, 글자를 입력하면 true가 나온다고 합니다. 

'123' 이런 숫자인척하는 글자도 false가 나온다고 하네요. 

혹은 typeof 라는 키워드 옆에 자료를 입력하면 문자면 'string' 숫자면 'number' 이런 식의 문자가 남는다고 합니다. 

둘 중 하나 쓰면 되겠군요.

 

근데 <input>에 입력한 데이터는 뭘해도 문자기 때문에 무조건 'string' 자료가 나올 것 같군요

그래서 isNaN()이 더 유용해보입니다. (혹은 v-model.number를 활용하면 또 다를 수 있겠군요)

 

그래서 저는 month 감시자 안에 이렇게 코드 짤겁니다. 

"month라는 데이터를 isNaN() 안에 집어넣어보고 true가 나오면 alert 띄우셈"

 

<template>
  <div class="black-bg" v-if="모달창열렸니==true">
    <div class="white-bg">
      <img :src="원룸들[누른거].image" style="width:50%;" alt="">
      <h4>{{원룸들[누른거].title}}</h4>
      <p>{{원룸들[누른거].content }}</p>
      <input v-model.number="month">
      <p>{{month}}개월 선택함 {{원룸들[누른거].price * month}}</p>
     <button @click="$emit('closeModal')">닫기</button>
    </div>
  </div>
  
</template>

<script>

export default {
  name: 'Modal',
  data() { 
    return {
      month: 0,
      
    }
  },

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

  props: {
    원룸들: Array,
    누른거: Number,
    모달창열렸니:Boolean,
  }
  
   
}
</script>

<style>
.black-bg{
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  position: fixed; padding : 20px;
}
.white-bg{
  width: 100%; background: white;
  border-radius: 8px;
  padding: 20px;
}
</style>

그랬다고 합니다. 그리고 문자를 입력한 경우에 month 초기값도 1로 설정해봤습니다. 

하지만 스페이스바 입력같은 경우는 거를 수 없었다고 합니다. 

이런건 알아서 해결해보십시오.