양식 작업

5분

Vue 앱 또는 구성 요소에서 data() 함수에 의해 반환되는 데이터를 일반적으로 ‘상태’라고 합니다. 상태는 애플리케이션에서 필수 작업을 수행하기 위해 추적해야 하는 모든 정보를 말합니다. 일반적으로 사용자는 HTML 양식을 통해 상태를 수정합니다. Vue.js를 사용하면 사용자가 상태를 업데이트할 수 있도록 양식에 데이터를 바인딩할 수 있습니다.

v 모델

v-model 지시문은 HTML 컨트롤과 연결된 데이터 사이에 ‘양방향’ 바인딩을 만듭니다. 따라서 값이 양식에서 업데이트될 때마다 애플리케이션의 상태 내에서 업데이트됩니다. v-model 지시문은 확인란, 텍스트 상자, 드롭다운 목록을 포함한 모든 양식 컨트롤에 대한 바인딩을 지원합니다.

참고

v-bind 지시문은 단방향 바인딩을 만듭니다. 따라서 사용자가 양식에서 변경한 내용이 상태에 저장되지 않습니다.

이 단원의 모든 예제에 대해 다음과 같은 Vue 애플리케이션을 사용합니다.

Vue.createApp({
    data() {
        return {
            name: 'Cheryl',
            status: -1,
            active: true,
            benefitsSelected: 'yes',
            statusList: [
                'full-time',
                'part-time',
                'contractor'
            ]
        }
    }
})

텍스트 상자에 바인딩

텍스트 상자에 바인딩하려면 v-model 지시문을 사용합니다.

<input type="text" v-model="name" />

name 속성은 텍스트 상자 값이 변경될 때마다 업데이트됩니다. 대신 textarea를 사용하려는 경우 구문은 동일합니다. 이전처럼 v-model="name"을 사용합니다.

확인란에 바인딩

일반적으로 부울 값은 확인란에 바인딩됩니다. 확인란에서는 옵션을 토글할 수 있습니다. active 옵션을 바인딩하려면 이전에 했던 대로 v-model을 사용할 수 있습니다.

<input type="checkbox" v-model="active" /> Is active

경우에 따라 토글은 부울 값이 아닙니다. 대신 ‘예’와 ‘아니요’ 같은 두 개의 선택 항목이 있을 수 있습니다. 이 경우 true-value 및 false-value를 사용하여 선택(true) 또는 선택 취소(false)된 확인란의 연결 값을 나타낼 수 있습니다.

<input type="checkbox" v-model="benefitsSelected" true-value="yes" false-value="no"> Benefits selected: {{ benefitsSelected }}

드롭다운 목록

HTML에서 두 부분으로 드롭다운 목록을 만듭니다. select를 사용하여 목록을 만들고 option을 사용하여 옵션을 추가합니다. select 태그는 선택한 드롭다운 목록 값을 저장하므로 이 태그를 사용하여 모델에 바인딩합니다.

Vue에서 다음을 수행해야 합니다.

옵션 목록을 만듭니다. option 요소 목록을 만들려면 v-for를 사용하여 반복 처리하고 배열의 각 항목에 대한 옵션 요소를 만듭니다.
값을 식별합니다. 만드는 각 옵션에 대해 값을 식별해야 합니다. 예를 들어 목록이 문자열 배열인 경우 문자열 또는 선택한 인덱스를 값으로 저장해야 합니다. 예를 들면 다음과 같습니다.
```
<select v-model="selectedIndex">
   <option v-for="(stringItem, index) in arrayOfStrings" :value="index"> 
   {{}}
   </option>
</select>
```
목록에서 개체의 배열을 저장하는 경우 표시 속성 및 값을 찾을 위치를 가리킵니다.
```
<select v-model="selectedValue">
   <option v-for="item in items" :value="item.value">
   {{ item.displayProperty }}
   </option>
</select>  
```
선택한 값을 추적합니다. v-model을 사용하여 선택한 값을 select 태그에 바인딩할 수 있습니다. 여기서 항목의 인덱스 또는 값을 추적할 수 있습니다. 원하는 대로 하면 됩니다.

옵션 목록을 만들려면 v-for를 사용하여 목록을 반복합니다. 그런 다음, 배열의 항목에 대한 인덱스로 값을 설정하도록 선택합니다. v-for(status, index) in statusList를 사용하여 각 항목에 대한 인덱스를 제공합니다. 그런 다음, 각 옵션의 :value를 index로 설정하고 사용자를 위한 옵션으로 status를 표시합니다.

<select v-model="statusIndex">
    <!-- Create a message to select one -->
    <option disabled value="">Please select one</option>
    <!-- Use v-for to create the list of options -->
    <option v-for="(status, index) in statusList" :value="index">
        {{ status }}
    </option>
</select>

마지막으로 v-model="statusIndex"를 추가하여 사용자가 항목을 선택할 때 statusIndex 데이터 속성의 값이 선택한 인덱스로 업데이트되도록 합니다.

양식 작업

v 모델

텍스트 상자에 바인딩

확인란에 바인딩

드롭다운 목록

피드백