Vue(version 3) 주요 기능 정리(v-model) #6

주요 기능 정리 #5에서는 input type=checkbox, type=radio일 때 v-model을 사용했을 경우에 대해서 알아봤다.
이번 주제는 select 컴포넌트에서 v-model을 사용하는 법에 대해서 알아보고자 한다.

<template>

  <div>

    <!-- Select를 Boolean 으로 사용하는 예제 -->

    <select v-model="selectedBooleanValue">

      <option value="true">True</option>

      <option value="false">False</option>

    </select>

    <!-- Select를 String 으로 사용하는 예제 -->

    <select v-model="selectedStringValue">

      <option value="A">A</option>

      <option value="B">B</option>

      <option value="C">C</option>

      <option value="D">D</option>

    </select>

    <!-- Select를 Object 로 사용하는 예제 -->

    <select v-for="user of selectOption" v-model="selectUser">

      <option :value="user">{{ user.UserName }}</option>

    </select>

  </div>

</template>

<script setup lang="ts">

const selectedBooleanValue = ref<boolean>(false)

const selectedStringValue = ref<'A' | 'B' | 'C' | 'D'>('A')

interface UserInfo {

  UserId: string

  UserName: string

}

const selectUser = ref<UserInfo>({

  UserId: 'test',

  UserName: '테스트'

})

let selectOption: UserInfo[] = [

  { UserId: 'test', UserName: '테스트' },

  { UserId: 'test1', UserName: '테스트1' },

  { UserId: 'test2', UserName: '테스트2' },

  { UserId: 'test3', UserName: '테스트3' },

  { UserId: 'test4', UserName: '테스트4' }

]

</script>

1번째 예제는 boolean 변수로 사용하는 예제이다.

2번째 예제는 String으로 사용하는 예제이다. selectedStringValue 라는 변수가 enum 형태의 string option을 사용하였는데, 그냥 string으로 사용하는 것이 일반적이며, 타입스크립트에서는 enum 형태를 string option으로 사용하는 것을 권장한다.

3번째 예제는 Object로 사용하는 예제이다. :value에 object를 직접 넣어주고, selectUser에서 object형태로 바로 사용이 가능한 형태이다.