Vue 3의 ESM vuild와 함께 vue-select 또는 다른 멋진 선택 상자를 사용하십시오.

Question

다음과 같은 간단한 설정과 Vue 3을 사용하는 클라이언트 측 JavaScript 애플리케이션이 있습니다.

HTML(선택 상자 포함):

으아아아

검색과 같은 최신 기능을 갖춘 "좋은" 선택 상자(예: vue-select 또는 select2)를 사용하고 싶지만 관련 구성 요소를 포함하는 방법을 모르겠습니다. jQuery와 Vue.js를 혼합하는 것에 대한 경고가 많이 표시되므로 select2를 jquery 플러그인으로 사용하고 그런 식으로 렌더링하는 것을 피합니다.

선택 상자를 "더 나은" 현대적인 선택 요소로 바꾸는 방법은 무엇입니까?

Answer 1

플러그인을 사용하고 싶지 않고 직접 빌드하는 것을 선호하는 경우(저는 선호합니다).

이렇게 하려면 div 내에서 옵션을 검색하는 데 사용할 수 있는 입력 유형 텍스트가 포함된 div를 만들 수 있습니다. 이러한 옵션은 숨겨진 div에 앵커 태그로 저장됩니다. 그런 다음 앵커 태그 요소와 호출해야 하는 함수에 이벤트 리스너를 연결합니다.

이것을 살펴보세요. 물론 편집하여 원하는 방식으로 작동하게 만들 수도 있습니다.

Answer 2

이것은 vue 3을 사용하는 esm 빌드가 아니지만 여전히 브라우저에서 직접 지원되는 UMD 빌드를 사용하고 있습니다(이유는 vue-select 라이브러리가 esm 빌드 버전을 제공하지 않지만 여전히 UMD 빌드를 지원하기 때문입니다).

기본적으로 다음과 같은 방법으로 종속성을 포함합니다.

으아아아

그런 다음 다음과 같이 vue 가져오기:

으아아아

그런 다음 vue-select 구성 요소를 다음과 같이 가져옵니다.

으아아아

작업 코드 조각:

으아아아