API에서 선택 항목을 검색하고 호출할 수 있는 드롭다운 목록

이런 드롭다운 리스트를 만들고 싶을 때 있어요.
프로토 타이핑 등으로 빨리 구현하고 싶어도 처음부터 스스로 만들면 괴로운 요소가 가득하지만, Vuetify를 사용해 보면 순식간에 감동했습니다.

코드는 여기
htps : // 코데펜. 이오 / 코 ky / 펜 / 에 QwvZM? 에아와 rs=1010

원래 Vuetify란?

머티리얼 디자인을 채용한 vue.js의 UI 컴포넌트 모음입니다. Bootstrap의 머티리얼 디자인 버전. 가려운 곳에 손이 닿는다! 힘들다!

이번에 사용하는 것은 Vuetify의 autocomplete component입니다. 도입・문서는 이쪽으로부터. 일본어 버전이라면 문서에 대한 설명이 표시되지 않으므로 영어 버전으로 액세스하십시오.
htps : // / 에치 fyjs. 코 m / 엔 / 코 m 포넨 ts / 아우 토코 mp ぇ s

어쩐지 copipe하고 여러가지로 움직인다. 대단해!

HTML 해설(발췌)

<v-autocomplete
    v-model="model"
    :items="items"
    :loading="isLoading"
    :search-input.sync="search"
    color="white"
    item-text="Description"
    item-value="API"
    cache-items
    hide-no-data
    hide-selected
    placeholder="入力できます"
    prepend-icon="mdi-database-search"
    return-object
></v-autocomplete>

각 속성의 의미는 다음과 같습니다.

items : API에서 fetch 된 옵션을 가진

item-text, item-value : 선택사항으로 표시상의 텍스트와 값을 흩어지게 하기 위한 프로퍼티

loading : API를로드하는 동안 텍스트 입력란의 밑줄을 좋은 느낌으로 애니메이션으로 만듭니다.

search-input.sync :이 검색 쿼리를 기반으로 API에서 데이터를 읽습니다.

cache-items : 한 번이라도 items에 들어간 값을 로컬 변수로 유지합니다.

hide-no-data : 이것이 있으면 검색 결과를 찾을 수 없을 때 "no data available"로 표시됩니다.

hide-selected : 현재 선택된 옵션이 드롭 다운 목록에 더 이상 표시되지 않습니다

return-object : 이 옵션이 있으면, 선택을 클릭했을 때에 「클릭한 item의 value」가 아니라 「item 객체 그 자체」가 돌려주어진다

JS부 분해설(발췌)

검색 부분에 입력한 내용 「search」가 갱신될 때마다, 이하의 처리가 행해져, API로부터 데이터를 읽어 갑니다.

watch: {
    search(val) {
        // すでに読み込み済みの場合は、何もしない
        if (this.items.length > 0) return
        // 読み込み中の場合も、何もしない
        if (this.isLoading) return

        this.isLoading = true

        // APIから、選択肢をfetchする
        axios.get('https://api.publicapis.org/entries').then(res => {
            const {
                count,
                entries
            } = res.data
            this.count = count
            this.entries = entries
        }).catch(err => {
            console.log(err)
        //読み込みが完了したので、loadingをfalseに
        }).finally(() => (this.isLoading = false))
    }
}

HTML·JS 맞춘 코드 전편은 이쪽입니다
htps : // 코데펜. 이오 / 코 ky / 펜 / 에 QwvZM? 에아와 rs=1010

덤: Vuetify를 도입하거나 망설이면

autocomplete component 이외에도,

창 크기에 따라 좋은 느낌으로 사이드 메뉴를 열고 닫는 구성 요소

페이지로드 로딩 효과

툴팁 및 대화

등, 처음부터 만들려면 조금 귀찮다 ...라고 생각하는 구성 요소가 모여 있기 때문에, 어쨌든 속도 중시로 개발하고 싶은 분에게 추천. 새로운 컴퍼넌트 추가나 버그 픽스를 위해서 대단한 빈도로 버전 업 하기 때문에, 체감적으로는 안정된 β판, 이라고 하는 마음 짓기로 사용하는 것이 좋을 것 같습니다.

지금까지 유일하게 느끼고 있는 단점은, Vuetify의 컴퍼넌트가 가지는 디폴트 스타일을 덮어쓰기 어려운 것(stylus로 기술되고 있기 때문에 한 번 번거롭다). stylus에서 scss로 전환하는 로드맵이 진행되고 있으므로, 버전 업을 기도할 뿐입니다. 나무나무.