[Vue] input에서 사용자가 입력한 값 받는 방법 (@input, @change, v-model)

React에서 input을 사용할 때는 onChange()라는 이벤트 핸들러를 사용하는 것처럼,

Vue에서는 input을 사용할 때 @input or @change를 사용할 수 있습니다. (@input = v-on:input)

 

🆚 차이점

• @input (= v-on:input)
  : input 무언가를 입력할 때마다 내부에 있는 코드(함수)가 실행됩니다.
• @change (= v-on:change)
  : input에 무언가를 입력한 후 커서가 다른 곳으로 이동했을 때 내부에 있는 코드(함수)가 실행됩니다.

---

🖥️ 문법

<input @input="console.log($event.target.value)" :value="number" placeholder="숫자를 입력해주세요" />

 

기존에 input에 이벤트 핸들러를 사용할 때 파라미터로 받던 e.target.value (or event.target.value)는 Vue에서 앞에 $만 추가해 주면 됩니다.

 

또한 속성에 데이터 바인딩을 사용하는 경우에는 속성 이름 앞에 :(콜론)을 사용하고, String 형태의 값을 넣을 때는 속성 이름만 사용하면 됩니다. String 형태가 아닌 Number, Boolean 등의 값을 넣고 싶을 때는 앞서 설명했던 데이터 바인딩하는 경우처럼 속성 이름 앞에 :(콜론)만 적어주면 됩니다. (또는 v-bind를 사용하거나)

 

@input or @change (=== v-on:input, v-on:change)만 상황에 맞춰 적절히 선택하여 사용하면 될 것 같습니다.

---

🤔  @input or @change 대신 사용할 수 있는 v-model

@input or @change에서 다른 작업 없이 input에 입력한 값을 data에 저장하기만 하면 되는 경우 v-model이라는 축약어를 사용할 수 있습니다.

<input v-model="number" placeholder="숫자를 입력해주세요" />

 

위와 같이 v-model ="데이터 이름"으로 설정하면 input에서 value에 변화가 생겼을 때 해당 데이터 이름으로 value 값을 저장해줍니다.

 

⚠️ v-model 사용 시 주의할 점

<input v-model="number" :value="number" placeholder="숫자를 입력해주세요" />

 

v-model에서 이미 number라는 data에 입력값을 바인딩하기 때문에 :value="number"를 사용하면 중복으로 인해 v-model에서 예상 동작을 방해될 수 있기 때문에 아래와 같은 오류가 발생할 수 있습니다.

VueCompilerError: Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.