[nuxt] v-model을 이용해 input의 value값 출력

세가지 타입의 input이 있다. 

<div id="textInput">
  <input type="text">
  <p>Value: </p>
</div>

<div id="numberInput">
  <input type="number">
  <p>Value: </p>
</div>

<div id="rangeInput">
  <input type="range" min="1" max="100" value="1" >
  <p>Value: </p>
</div>

nuxt를 사용하지 않는다면, script에서 input의 input/keyup 등의 이벤트를 받아 innerHTML을 하여 출력을 할 것이다.

nuxt에서는 input의 이벤트 작성 없이 간단히 출력이 가능하다.

 

1. data에 각각의 input을 선언

  나는 values 라는 하나의 객체로 묶어서 사용했다.

<script>
export default {
  data: function(){
    return {
      values: {
        textInput: 0,
        numberInput: 0,
        rangeInput: 0
      }
    }
  }
}
</script>

2. input에 v-model을 셋팅해준다. v-model은 input과 data의 양방향 바인딩을 가능하게 해준다.

3. value값을 출력할 위치에 {{v-model data name}}을 입력하면 해당 인풋의 value 값이 출력된다.  

<div id="textInput">
  <input type="text" v-model="values.textInput">
  <p>Value: {{values.textInput}}</p>
</div>

<div id="numberInput">
  <input type="number" v-model="values.numberInput">
  <p>Value: {{values.numberInput}}</p>
</div>

<div id="rangeInput">
  <input type="range" min="1" max="100" value="1"  v-model="values.rangeInput">
  <p>Value: {{values.rangeInput}}</p>
</div>