Vue.js Vue-multiselectを利用してselectbox で複数選択を可能にする

Vue.js Vue-multiselectを利用してselectbox で複数選択を可能にする

VueのライブラリVue-multiselectをインストールしてselectboxで複数選択できるようするまでの簡単なサンプルコードです。

環境

  • OS  CentOS 8.0.1905 (Core)
  • node v12.13.1
  • npm 6.13.2
  • @vue/cli 4.1.1
  • vue-multiselect 2.1.6

※CentOS8にVue.jsの環境構築はこちら

Vue-multiselectインストール

下記のコマンドでインストールします。

Vue-multiselectの利用

Vue-multiselectを利用するための簡単サンプルコード。

インストール時にデフォルトであるsrc/components配下のHelloWorld.vueを下記のように編集します。

src配下の CSSを少し追加しただけで App.vueはデフォルトのままです。

ブラウザから http://プライベートIP:8080 にアクセスすると、Vue-multiselectによりselectbox で複数選択が可能になります。