[Vue] v-model

1. 사용법

폼 엘리먼트(input, textarea, select 엘리먼트)에 양방향 데이터 바인딩 가능.

(Vue 인스턴스 ⇄ Template 과 같이 두 방향 모두 데이터에 접근 할 수 있도록 하는 것을 양방향 데이터 바인딩)

모든 폼 엘리먼트의 초기 value와 checked, selected 속성을 무시.

컴포넌트의 `data` 옵션 안에 있는 JavaScript에서 초기값을 선언해야 한다. (붸리베리중요!!! 까먹지말자)

 

 

2. 작동원리

v-model 속성은 v-bind와 v-on의 기능의 조합으로 동작한다.

HTML 입력 요소의 종류에 따라 v-model 속성이 각각 다음과 같이 구성된다.

• input, textarea 태그에는 value / input
• checkbox, radio에는 checked / change
• select 태그에는 value / change
  
  

 

v-model은 부모 - 자식 관계가 없는 컴포넌트에서는 아래와 같이 자유롭게 사용!!

// 부모 컴포넌트
<template>
  <checkbox v-model="checkBox">체크</checkbox>
</template>

<script>
export default {
  data() {
    return {
      checkBox: false
    };
  }
};
</script>

그러나 부모 - 자식 간 관계가 있는 컴포넌트에서 자식 컴포넌트가 부모 컴포넌트의 값을 가져와

위와 같이 v-model로 사용한다면 에러가 뜬다.

그렇기 때문에 자식컴포넌트가 부모의 값을 핸들링하려면 v-model이 아닌 :value와 @input을 사용해야 한다.

// 자식 컴포넌트
<template>
  <textarea :value="value" @input="$emit('input', $event.target.value)" />
</template>
<script>
export default {
  props: {
    value: String
  },
  data() {
    return {
      text: ""
    };
  }
};
</script>

v-model = :value + @input

 

 

#문자열

양방향 데이터 바인딩이 자주 사용되는 대표적인 예가 바로 폼 입력을할 수 있는 input 태그이다.

<div id="app">
  <input type="text" v-model="name">
  {{ name }}
</div>

new Vue({ 
  el: "#app", 
  data: {
    name: ""
  }
})

 

#여러줄을 가진 문장

<div id="app"> 
    <span>여러 줄을 가지는 메시지:</span> 
    <p style="white-space: pre-line">{{ message }}</p> 
    
    <br> 
    <textarea v-model="message"></textarea> 
</div>

new Vue({ 
    el: '#app', 
    data: { 
    	message: '' 
    } 
});

 

 

#체크박스

하나의 체크박스는 boolean 값 / 여러개의 체크박스는 배열 값

<div id="app"> 
  <input type="checkbox" id="checkbox" v-model="checked"> 
  <label for="checkbox">{{ checked }}</label> 

  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>

  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>

  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>체크한 이름: {{ checkedNames }}</span> 
</div>

new Vue({ 
    el: '#app', 
    data: { 
    	checked: false,
        checkedNames: [],
    } 
});

 

#라디오

<input type="radio" id="one" value="one" v-model="picked">
<label for="one">one</label>

<input type="radio" id="two" value="two" v-model="picked">
<label for="two">two</label>

<br>
<span>선택 : {{ picked }}</span>

new Vue({ 
    el: '#app', 
    data: { 
    	picked: '' 
    } 
});

 

#셀렉트

<div id="app"> 
    <select v-model="selected"> 
        <option disabled value="">Please select one</option> 
        <option>A</option> 
        <option>B</option> 
        <option>C</option> 
    </select> 
    
    <span>선택함: {{ selected }}</span> 
</div>

new Vue({
  el: '#app',
  data: {
    selected: '',
    selected: [] // 다중 셀렉트
  }
});

 

 

 

vue input radio not checked with v-model