vue-next-selectを使用してドロップダウンリストを作成する

javascript

本記事では、vueでドロップダウンリストを作成する方法について解説します!

本記事ではvue3でscript setupを使用しており、vue-next-selectライブラリでドロップダウンリストを作成していきます!

vue-next-selectをimportする

npm install vue-next-select

まずは、プロジェクトにvue-next-selectをインポートします。

続いて、main.jsにAppに対してvue-next-selectをマウントします。

import App from './App'
import VueNextSelect from 'vue-next-select'
import 'vue-next-select/dist/index.min.css'

createApp(App).component('vue-select', VueNextSelect).mount("#app");

これで、どこからでもvue-next-selectを使用することができます。

vue-next-selectでドロップダウンリストを作成する

<script setup>
const selectedValue = ref(null)
const options = [
  'Option1',
  'Option2',
  'Option3',
]

</script>
<template>
<div>
  <vue-select v-model='selectedValue' :options='options' />
</div>
<template>

上記を記載していただければ、そのままドロップダウンリストを作成することができます!

見た目はこんな感じ↓↓

細かい設定についても説明していきます。

選択したらオプションを閉じる

デフォルトだと、オプションの選択後、ドロップダウンリストが閉じないため、閉じさせたい場合はclose-on-selectを指定する必要があります。

<vue-select v-model='selectedValue' :options='options' close-on-select/>

表示する名前(label)を指定して作成する

const options = [
  { value:'Option1', name: 'a'},
  { value:'Option2', name: 'b'},
  { value:'Option3', name: 'c'},
]

<vue-select v-model='selectedValue' :options='options' close-on-select label-by='name'/>

選択する値は下記のようにnameで指定したものになります。ただし、v-modelでバインディングされる値は、valueが適用されます。

複数選択できるようにする

const options = [
  { value:'Option1', name: 'a'},
  { value:'Option2', name: 'b'},
  { value:'Option3', name: 'c'},
]

<vue-select v-model='selectedValue' :options='options' label-by='name' multiple/>

multipleを指定すると、オプションを複数設定することができます。

コメント

タイトルとURLをコピーしました