[Vue.js] 사용자의 input 받아오기

💡 실습 포인트!

• 사용자가 <input> 에 무언가를 입력하면 그것을 가지고 여러가지 UI 기능을 만들 수 있다.
• 오늘은 그 중에 상품 수량 변경 기능과 총 금액 계산 기능을 만들어보았다.

---

💜 사용자가 입력한 정보를 data 보관함에 저장해보기

🤍 <input> 에 입력된 데이터를 받아와 저장하기

• 사용자가 입력한 정보에 따라서 특정 부분을 실시간으로 바꾸고 싶으면 data 보관함에 data 로 저장해두고 필요할 때 데이터바인딩을 하면 된다.

<template>
	<input @input="months = $event.target.value">
    	<p>{{months}}개월 선택: {{ rooms[clickedRoom].price * months }}원</p>
</template>

<script>
export default {
  data(){
    return {
      months : 0
    }
  }
}
</script>

• 따라서, 사용자가 <input> 에 입력한 값을 data 로 저장하고 싶으면 위와 같이 코드를 작성하면 된다.
• @input 은 @click 과 마찬가지로 이벤트 핸들러인데, 다만 사용자가 input 에 무언가를 입력할 때 동작하는 이벤트 핸들러이다.
• @input 과 유사한 이벤트 핸들러로는 @change 가 있다.
• $event 는 Vue 가 제공하는 특별한 변수인데 event object 를 뜻하며, JavaScript 에서 addEventListener('click', function(e){ }) 와 같이 이벤트 리스너를 사용하고는 하는데 여기서의 e 와 동일한 역할을 한다.
• 따라서, $event.target.value 라고 코드를 작성하면 <input> 에 입력한 값을 가져올 수 있다.
• 이제, 사용자가 <input> 에 입력한 값이 data 보관함의 months 에 저장이 되는 것이다.
• 그리고 <p></p>에 <input> 에 입력된 숫자를 months 에 저장한 후 불러와서, months 에 가격을 곱하여, 개월 수에 따른 총 금액을 계산해주도록 기능을 만들었다.

---

📌 @input 대신 v-model 사용하기

// @input 사용
<input @input="months = $event.target.value"> 

// v-model 사용
<input v-model="months">

• Vue 에는 @input 대신에 사용할 수 있는 v-model 이라는 문법이 있다.
• v-model 은 v-model 이라는 코드가 적힌 html 태그에 입력된 값을 따옴표 안에 들어있는 이름의 data 보관함에 저장해달라는 의미이다.
  (참고로, <input> 외에 <textarea>,<select> 에도 적용 가능하며, <input type="checkbox"> 와 같이 타입을 변경해도 적용이 가능하다.)
• 따라서, 위 두 코드는 똑같이 동작한다.
• 그리고 두 코드 모두 <input> 에 입력된 값은 String 타입에 해당하므로, 숫자가 입력되어도 문자로 저장이 된다.
• 그래서 숫자로 저장하고 싶다면 v-model 의 경우에는 v-model.number="months" 와 같이 directive 를 사용하면 된다.
• 하지만 이 경우 숫자로 변환만 하여 저장해주는 것일 뿐 문자의 입력을 막아주는 것은 아니라는 점을 기억해야 한다.