vue-select または別の優れた選択ボックスを Vue 3 の ESM vuild とともに使用します。

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 コンポーネントを次のようにインポートします:

リーリー

実用的なコード スニペット:

リーリー