[Vue.js] input, watch 를 활용해 사용자로부터 데이터 받기

✔️ 사용자의 input 을 받는 법

    data() {
      return {
        month : 1
      }

 

데이터에 input 에 입력받을 변수를 추가하고,

 

      <input @input="month = $event.target.value">

 

input 에 값이 입력되면 자동으로 그 값이 month 변수에 저장되도록 설정을 할 수 있다.

 

<input v-model="month">

 

더 축약해서 위처럼 줄일 수 있다.

 

• textarea, select 태그 등에도 사용할 수 있다.

 

※ data 에서 초기값에 따라서 해당 변수에 어떤 값이 들어올지 정하는 것이기 때문에, 지금 상황에서 input 태그 안에 문자를 넣으면 인식을 안한다.

 

• v-model.number 를 사용해서 숫자로 취급할 수 있다.

---

✔️ watch 를 사용해 데이터 감시

데이터가 올바른 값이 들어왔는지 검사하기 위해 watch 를 사용한다.

 

export default {
    name: 'Modal',
    data() {
      return {
        month : 1
      }
    },
    watch : {
      month(a) {
        if (isNaN(a)) {
          alert('문자 입력하지 마셈')
          this.month = 1;
          return;
        }
        if (a>12) {
          alert('13 이상 입력 불가능')
          this.month = 1;
        }
      }
    },
    props : {
      onerooms : Array,
      user_clicked : Number,
      modal_status : Boolean
    }
}

 

export default 안에 watch 를 만들고,

감시할데이터() {} 로 지정해준다.

다음 경고문 등 조건을 걸어주면 해당 데이터에 조건을 걸 수 있다.