[Vue.js] 다중 선택 옵션 구현하기

<template>
  <div>
    <!-- 예제 1: 선택된 항목을 표시하는 부분 -->
    <div>선택됨: {{ selected }}</div>

    <!-- 예제 2: 다중 선택 셀렉트 박스 -->
    <select v-model="selected" multiple>
      <option>가</option>
      <option>나</option>
      <option>다</option>
    </select>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 다중 선택된 옵션을 저장하는 ref
    const selected = ref([]);

    return {
      selected
    };
  }
};
</script>

Vue에서 다중 선택 옵션을 구현하기 위해 셀렉트 박스에 multiple 속성을 추가하고, 선택된 값을 배열로 바인딩합니다.

1. 예제 1: 선택된 항목을 표시하는 부분입니다. 사용자가 셀렉트 박스에서 옵션을 선택하면 선택된 옵션들이 배열로 표시됩니다.

2. 예제 2: 다중 선택 셀렉트 박스를 보여주는 부분입니다. 여기서는 multiple 속성을 추가하여 여러 옵션을 동시에 선택할 수 있도록 합니다. 사용자는 드롭다운 메뉴에서 여러 옵션을 선택할 수 있습니다.

다중 선택 셀렉트 박스를 사용하면 사용자가 여러 옵션을 한 번에 선택할 수 있으며, 선택된 값을 배열로 효과적으로 관리할 수 있습니다.