Vuetify - select에 검색기능을 추가하려면? autocomplete

개인서비스의 select 컴포넌트에 데이터가 많아져서 조회기능을 넣으면 좋지 않을까 하여 개선해보았다.

 

vuetify의 기존 select 컴포넌트는 다음과 같은데

...
<v-row dense>
  <v-col cols="12">
    <v-select
      v-model="selectCoatings"
      :items="coatings"
      item-text="codeName"
      item-value="code"
      label="코팅"
      multiple
      dense
      outlined
      @change="changeCoatings"
    ></v-select>
  </v-col>
</v-row>
...

위와 같은 모습으로 나오게 된다. 항목이 적을 경우는 편리하긴한데 조회기능이 없어서 많아지면 불편하다.

 

이를 Autocomplete 컴포넌트가 해결할 수 있다.

...
<v-row dense>
  <v-col cols="12">
    <v-autocomplete
      v-model="selectCoatings"
      :items="coatings"
      item-text="codeName"
      item-value="code"
      label="코팅"
      multiple
      dense
      outlined
      @change="changeCoatings"
    ></v-autocomplete>
  </v-col>
</v-row>
...

v-select 를 v-autocomplete로만 변경해주면 완료

위와 같이 검색도 되는 select 컴포넌트로 개선 가능하다.

 

여담

직접 만들기 전에 제공되는 api, 컴포넌트를 조회 후, 라이브러리를 찾아보고, 그리고 없으면 구현하는게 좋다.

거인의 어깨는 서비스 개발 속도에 아주 큰 도움이 되니까..