![]()
[step1] , 태그를 , 태그로 바꾸기 AutoComplete.vue {{item.animalName}} 비교를 위한 기존코드는 아래와 같습니다. ComboBox.vue 선택해주세요 {{item.animalName}} input 창에 blur이벤트와 focus 이벤트로 select 박스의 옵션들이 나오는 것처럼 li태그들이 나오게 만들어주면 됩니다. li태그를 선택하면 animal data의 값이 설정될 수 있도록 이벤트를 만들어줍니다. AutoComplete.vue 여기에 콤보박스처럼 보이도록 CSS를 입혀줍니다. AutoComplete.vue (autocmplete css) #content{ display: grid; grid-template-columns: 100px 200px; } .title..
![]()
개요 태그로 구현된 콤보박스의 옵션이 점점 많아지게 되면서 원하는 정보를 찾기 불편하다는 요청을 받게 되었습니다. 이를 개선하기 위한 방안으로 콤보박스에 검색 기능을 추가하게 되었고, 구글링을 하던 중 AutoCompletes라는 Vuetify의 컴포넌트를 알게 되었습니다. https://vuetifyjs.com/en/components/autocompletes/#usage Autocomplete component — Vuetify The autocomplete component provides type-ahead autocomplete functionality and provides a list of available options. vuetifyjs.com 해당 기능을 참고하여 개선을 완료하였고 잊기..
![]()
Vue에서 구현했던 기능을 정리하기 위해 가상 API가 필요하여 검색하던 중 My JSON Server를 발견하였습니다 https://my-json-server.typicode.com/ My JSON Server - Fake online REST server for teams my-json-server.typicode.com/user/repo/posts/1 { "id": 1, "title": "hello" } my-json-server.typicode.com 사용법은 간단하게 잘나와있지만 1. 내 github에 레포를 하나 생성합니다. 2. db.json 파일을 생성합니다. 3. https://my-json-server.typicode.com// 를 열어 가상 API 서버가 잘 열리는 지 확인합니다. 저..
