Vue3 ライブラリ「@vueform/multiselect」を使用して複数選択可能なセレクトボックスを実装する

作成日 2021.03.07
Vue.js
Vue3, ライブラリ

ライブラリ「@vueform/multiselect」を使用して、複数選択可能なセレクトボックスを実装することが可能です。ここでは、@vueform/multiselectを利用するための手順と簡単な使い方を記述してます。

1. 環境
2. Vue3環境構築
3. @vueform/multiselectインストール
4. @vueform/multiselect使い方
5. 起動

環境

OS windows10 64bit
vue 3.0.0
node v14.6.0
yarn 1.22.10
@vue/cli 4.5.9

Vue3環境をwindowsに構築する

Vue3環境構築

vue-cliを使用して構築してます。

npm install -g @vue/cli

npm init

vue upgrade --next

## vueappというプロジェクトを作成
vue create vueapp

cd vueapp

@vueform/multiselectインストール

yarnを使用して、インストールします。

yarn add @vueform/multiselect

yarnがインストールされていない場合は、以下のコマンドでインストール可能です。

npm install -g yarn

@vueform/multiselect使い方

src配下のApp.vueを下記のように編集します。

<template>
  <div class="container">
    <Multiselect
      v-model="value"
      mode="tags"
      placeholder="Select your characters"
      :options="options"
      :searchable="true"
      :createTag="true"
    />
  </div>
</template>

<script>

  import Multiselect from '@vueform/multiselect'

  export default {
    components: { Multiselect },
    data() {
      return {
        value: [],
        options: ['js', 'node', 'vue', 'react', 'typescript']
      }
    }
  }

</script>
<style>
.container {
  margin: 0 auto;
  margin-top:200px;
  min-height: 100vh;
  width: 500px;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>
<style src="@vueform/multiselect/themes/default.css"></style>