[Vue.js] 동적으로 생성된 옵션을 가진 셀렉트 박스 구현하기

<template>
  <div>
    <!-- 예제 1: 동적으로 생성된 셀렉트 박스 -->
    <select v-model="selected">
      <option v-for="option in options" :value="option.value">
        {{ option.text }}
      </option>
    </select>

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

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

export default {
  setup() {
    // 선택된 옵션을 저장하는 ref
    const selected = ref('1');

    // 동적으로 생성된 옵션들을 저장하는 ref
    const options = ref([
      { text: '하나', value: '1' },
      { text: '둘', value: '2' },
      { text: '셋', value: '3' }
    ]);

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

이 예제는 Vue.js에서 동적으로 생성된 옵션을 가진 셀렉트 박스를 구현하는 방법을 보여줍니다.

1. 예제 1: 동적으로 생성된 셀렉트 박스를 표현하는 부분입니다. v-for 디렉티브를 사용하여 options 배열에 있는 각 요소를 반복하면서 옵션을 생성합니다. 각 옵션의 값은 option.value로 설정되고, 표시되는 텍스트는 option.text로 설정됩니다.

2. 예제 2: 선택된 항목을 표시하는 부분입니다. 사용자가 셀렉트 박스에서 옵션을 선택하면 선택된 값이 selected 변수에 바인딩되어 표시됩니다.

이러한 방식을 사용하면 Vue.js에서 동적으로 생성된 옵션을 가진 셀렉트 박스를 쉽게 구현할 수 있습니다.