[Vue] 사용자의 input을 받는 법 (v-model)

모달창 안에 사용자가 살고자 하는 개월 수를 입력하는 칸을 만들어보자. (Model.vue에서 진행)

<input @change="">

<input @input="">

--> @change는 입력하고 커서를 다른 곳에 찍으면 실행해주세요. 라는 의미이고,
     @input은 입력할 때마다 실행해주세요. 라는 의미이다.

사용자가 input 에 입력한 값을 데이터로 저장하려면 먼저 저장할 공간을 만들어준다.

export default {

    name: 'Modal_',

    data() {

        return {

            month : 1,

        }

    },

    props: {

        원룸들 : Array,

        누름 : Number,

        modalOpen : Boolean,

    }

}

--> month 라는 데이터를 만들어주고

<template>

<div class="black-bg" v-if="modalOpen == true">

    <div class="white-bg">

        <h4>{{ 원룸들[누름].title }}</h4>

        <p>{{ 원룸들[누름].content }}</p>

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

        <p> {{ month }}개월 선택함 : {{ 원룸들[누름].price * month }}원</p>

        <button @click="$emit('closeModal')">닫기</button>

    </div>

</div>

</template>

--> @input = "month = $event.target.value" 를 통해 month에 사용자가 입력한 데이터를 저장할 수 있다.

 

결과물

 

이 때 v-model 문법을 사용하면 위 코드를 간단하게 줄일 수 있다.

<template>

<div class="black-bg" v-if="modalOpen == true">

    <div class="white-bg">

        <h4>{{ 원룸들[누름].title }}</h4>

        <p>{{ 원룸들[누름].content }}</p>

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

        <input v-model="month">

        <p> {{ month }}개월 선택함 : {{ 원룸들[누름].price * month }}원</p>

        <button @click="$emit('closeModal')">닫기</button>

    </div>

</div>

</template>

--> input v-model="month"과 같이 v-model="데이터이름"을 써주면 데이터가 자동으로 저장된다. 아까랑 똑같은 결과!

        <textarea v-model="month"></textarea>

        <select v-model="month"></select>

        <input type="checkbox" v-model="month">

--> 다른 여러 input 태그에도 v-model을 사용할 수 있다.

* 참고로 데이터 초기값이 중요하다. 초기값에 따라 데이터가 저장되지 않기도 한다.
여기에선 month를 1(숫자)로 초기값 설정을 해서 'ㄱㄴㄷㄹ'과 같은 문자는 저장이 되지 않는다.

* 사용자가 <input>에 입력한 것은 전부 문자자료형으로 저장이 된다. 123 이라고 저장해도 '123' 이라는 뜻!
따라서 사용자에게 받은 값을 어떠한 계산을 위해 반드시 숫자형으로 바꿔야 한다면

        <input v-model.number="month">

--> 이렇게 v-model.number 를 사용해서 숫자로 바꿔주면 된다.

 

출처 : 코딩애플