Vue.jsベースのフレームワーク！ Nuxt.jsプラグイン《セレクトボックスでの複数選択の実行》

こんにちは、樋口です。

今回は、Nuxt.jsからライブラリを読み込むだけで簡単にセレクトボックスでの複数選択をできるようにできるVue-multiselectについてご紹介します。

使用するライブラリ

今回は下記ライブラリを使用して説明をしていきます。

Vue.js: 2.6.11
Nuxt.js: 2.12.2
Vue-multiselect: 1.0.4

Vue-multiselectの追加

初めにコマンドプロンプトで、使用するNuxt.jsのプロジェクトフォルダまで移動します。移動後、以下のコマンドを実行します。

npm i nuxt-vue-multiselect –save

コマンド実行時の画面イメージ

これで対象のプロジェクトに、ライブラリを追加することができました。詳しい内容については、公式ページよりご確認ください。

次に実際のライブラリの使用方法について解説していきます。

nuxt.config.js設定

次に、nuxt.config.jsに設定を追加します。

export default {
  mode: 'universal',
  ・・・・・
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    [
      'nuxt-vue-multiselect'  ← 記載を追加
    ]
  ],
  // 終了
  ・・・・・
}

export default {

mode: 'universal',

・・・・・

modules: [

// Doc: https://axios.nuxtjs.org/usage

'@nuxtjs/axios',

[

'nuxt-vue-multiselect' ← 記載を追加

]

// 終了

・・・・・

}

８行目：
Vue-multiselectライブラリの使用に必要な記載となります。

プロジェクト構成

今回は下記のプロジェクト構成で作業を行っていきます。

Vueファイル

今回サンプル用に作成した、Vueファイルを下記に記載します。

– index.vue

<template>
  <div class="samaple__conntents">
    <div style="margin-top: 20px;">
      <div style="width: 50%; margin-left: 26%;">
        <h1 style="text-align: center;">Vue-multiselect</h1>
        <multiselect
          v-model="value"
          :multiple="true"
          :options="options"
        ></multiselect>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import Multiselect from 'vue-multiselect'

Vue.component('multiselect', Multiselect)
export default {
  components: { Multiselect },
  data() {
    return {
      value: null,
      options: ['list', 'of', 'options'],
    }
  },
}
</script>

<h1 style="text-align: center;">Vue-multiselect</h1>

<multiselect

v-model="value"

:multiple="true"

:options="options"

></multiselect>

</div>

</template>

import Vue from 'vue'

import Multiselect from 'vue-multiselect'

Vue.component('multiselect', Multiselect)

export default {

components: { Multiselect },

data() {

return {

value: null,

options: ['list', 'of', 'options'],

}

</script>

６行目～１０行目：
セレクトボックス表示の宣言を行います。
「:multiple」では複数選択を有効に、「:options」で表示する内容を宣言しています。

１６行目～１９行目：
ここで「Vue-multiselect」を使用するためのモジュール読込を行います。

２１行目：
「Vue-multiselect」モジュールの使用宣言をこないます。

２４行目：
セレクトボックスで選択された内容を保存する変数となります。

２５行目：
セレクトボックスに表示するデータ内容を宣言しています。