[Vue.js]Vue로 콤보박스 만들기(<select><option>)

개요

태그로 구현된 콤보박스의 옵션이 점점 많아지게 되면서 원하는 정보를 찾기 불편하다는 요청을 받게 되었습니다.
이를 개선하기 위한 방안으로 콤보박스에 검색 기능을 추가하게 되었고, 구글링을 하던 중 AutoCompletes라는 Vuetify의 컴포넌트를 알게 되었습니다.

https://vuetifyjs.com/en/components/autocompletes/#usage

Autocomplete component — Vuetify

해당 기능을 참고하여 개선을 완료하였고 잊기 전에 그 과정을 정리하고자 합니다😊

---

Vue.js에서 콤보박스 구현

비교를 위해 먼저 콤보박스를 구현해 보겠습니다. 저는 Vue.js 공식문서를 참고하였습니다!

https://ko.vuejs.org/guide/essentials/forms#select

Vue.js

CODE(App.vue)

<template>
  <div>
    <h1>Vue에서 AutoComplete 직접 구현하기</h1>
    <combo-box v-bind:animals = "animalList"></combo-box>
  </div>
</template>

<script>
import ComboBox from './components/ComboBox.vue'
import axios from 'axios';
  
export default{
    data(){
        return{
            animalList: [],
        };
    },
    components:{
        'combo-box': ComboBox
    },
    mounted(){
      this.load();
    },
    methods:{
      load(){//load animal list
          let _this = this;
          axios.get('https://my-json-server.typicode.com/teon98/demo/animalList')
          .then((res) => {
              _this.animalList = res.data;
          }).catch((err) => {
              console.log(err)
          });
      },
    }
}
    
</script>

<style scoped>
</style>

[설명]

부모 컴포넌트인 App.vue에서 my-json-server로 만들어준 가상 REST API의 animalList를 axios를 이용해 불러왔습니다.

이후 자식 컴포넌트인 combo-box에 animals라는 이름의 props값으로 넘겨주었습니다.

CODE(ComboBox.vue)

<template>
  <h2>(1) Vue의 ComboBox</h2>
  <div id="body">
    <div id="content">
      <p class="title">ID</p><p>{{animal === '' ? '-' : animal.animalID}}</p>
      <p class="title">NAME</p><p>{{animal === '' ? '-' : animal.animalName}}</p>
    </div>
    <div id="searchBox">
        <select v-model="animal">
            <option disabled value="">선택해주세요</option>
            <option v-for="(item, index) in animals" :value="item" :key="index">
              {{item.animalName}}
            </option>
        </select>
    </div>  </div>
</template>

<script>
export default{
    props: ['animals'],
    data(){
        return{
            animal: '',//선택된 동물
        };
    },
};
</script>

<style scoped>
  #content{
    display: grid;
    grid-template-columns: 100px 200px;
  }
  .title{
    font-weight: bold;
  }
</style>

[설명]

<select v-model="animal">
	<option disabled value="">선택해주세요</option>
	<option v-for="(item, index) in animals" :value="item" :key="index">
		{{item.animalName}}
	</option>
</select>

select 태그로 선택된 값을 v-model을 이용해 컨트롤합니다.

props로 넘겨받은 동물리스트(animals)를 v-for문으로 돌려주고

선택된 동물 객체를 value로 index는 key로 넘겨주었습니다.

추가로 선택된 동물 객체가 없을 경우를 대비해 default 값 또한 지정해 주었습니다.

[화면]

콤보박스 선택하기 전	콤보박스 선택 후
첫 load시 선택된 option이 없으면 ID와 NAME에 '-'가 표시됩니다.	option을 선택하면 선택된 객체 안에 들어있던 ID와 NAME이 표시됩니다.

전체 코드 보기(Replit)