Vue3 기초 예제 - Dynamic Select Box

화면에서 입력받은 값으로 Dynamic Select Box를 생성하는 기초 예제

*아래 예제는 전 예제에 이어서 진행(아래 링크 참고)

*자세한  설명 생략

 

 

▷ 기초 예제 - Dynamic Select Box 생성

*Event Handling 관련 아래 링크 참고

*프로젝트 구조 및 CSS 생략

*파일 경로 필요시 App.vue 경로 참고

 

- CompositionTestCmp.vue

<template>
    <hr>
    <h2>[ Composition Example ]</h2>
    <button @click="initTest();">초기화</button>
    <div>
        <h4> 입력 :
            <input v-model="inData" @keyup.enter="addList(inData);" placeholder="아무거나 입력해주세요.">
        </h4>
    </div>
    <div>
        <h4> 선택 :
            <select v-model="select">
                <option value="-" selected>선택해주세요.</option>
                <option v-for="(item, i) in list" :key="i" :value="item">{{ item }}</option>
            </select>
        </h4>
    </div>
    <div>
        <h4> 확인 :
            {{ select }}
        </h4>
    </div>
    <div>
        <h4> 리스트 현황</h4>
        <div v-for="(item, i) in list" :key="item">
            {{ i }} → {{ item }}
        </div>
    </div>
    <hr>
</template>

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


/** 반응형 객체 */
let inData  = ref("");
let list    = ref([]);
let select  = ref("-");


/** 리스트 값 추가 */
function addList(data) {
    if (data == "" || data == null) {
        alert("입력 값이 없습니다.");
    } else {
        list.value.push(data);
        inData.value = "";
    }
}

/** 초기화 */
function initTest() {
    inData.value = "";
    list.value = [];
    select = "-";
}
</script>

 

- App.vue

<template>
  <div id="HeaderCmp"><HeaderCmp /></div>
  <div id="TestDiv">
    <p id="CompositionTestCmp"><CompositionTestCmp /></p>
    <p id="IfTestCmp"><IfTestCmp /></p>
    <p id="ForTestCmp"><ForTestCmp /></p>
  </div>
</template>

<script>
import HeaderCmp from '@/components/HeaderCmp.vue'
import ForTestCmp from '@/components/Test/ForTestCmp.vue'
import IfTestCmp from '@/components/Test/IfTestCmp.vue'
import CompositionTestCmp from '@/components/Test/CompositionTestCmp.vue'

export default {
  components: {
    HeaderCmp,
    ForTestCmp,
    IfTestCmp,
    CompositionTestCmp
  }
}
</script>

 

 

▷ 결과 확인

*http://localhost:8080

 

① 초기 페이지

 

② 아무거나 입력 후 엔터

 

③ Dynammic Select Box 확인

 

④ 초기화 버튼 클릭

 

⑤ 초기화 상태 확인

 

 

▷ 참고

Event Handling | Vue.js

 

 

▷ 관련 글

Vue3 기초 예제 프로젝트 정리