
こんにちは、樋口です。
今回は、Nuxt.jsからライブラリを読み込むだけで簡単にセレクトボックスでの複数選択をできるようにできるVue-multiselectについてご紹介します。
使用するライブラリ
今回は下記ライブラリを使用して説明をしていきます。
- Vue.js
- 2.6.11
- Nuxt.js
- 2.12.2
- Vue-multiselect
- 1.0.4
Vue-multiselectの追加
初めにコマンドプロンプトで、使用するNuxt.jsのプロジェクトフォルダまで移動します。移動後、以下のコマンドを実行します。
これで対象のプロジェクトに、ライブラリを追加することができました。詳しい内容については、公式ページ よりご確認ください。
次に実際のライブラリの使用方法について解説していきます。
nuxt.config.js設定
次に、nuxt.config.jsに設定を追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
export default { mode: 'universal', ・・・・・ modules: [ // Doc: https://axios.nuxtjs.org/usage '@nuxtjs/axios', [ 'nuxt-vue-multiselect' ← 記載を追加 ] ], // 終了 ・・・・・ } |
8行目:
Vue-multiselectライブラリの使用に必要な記載となります。
プロジェクト構成
今回は下記のプロジェクト構成で作業を行っていきます。
|- .nuxt
|- assets
|- components
|- layouts
|- middleware
|- node_modules
|- pages
|- multiselect
|- index.vue ← 今回修正ファイル
|- plugins
|- static
|- language
|- store
|- .editorconfig
|- .eslintrc.js
|- .gitignore
|- .prettierrc
|- nuxt.config.js
|- package.json
|- package-lock.json
|- README.md
|- stylelint.config.js
Vueファイル
今回サンプル用に作成した、Vueファイルを下記に記載します。
– index.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<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> |
6行目~10行目:
セレクトボックス表示の宣言を行います。
「:multiple」では複数選択を有効に、「:options」で表示する内容を宣言しています。
16行目~19行目:
ここで「Vue-multiselect」を使用するためのモジュール読込を行います。
21行目:
「Vue-multiselect」モジュールの使用宣言をこないます。
24行目:
セレクトボックスで選択された内容を保存する変数となります。
25行目:
セレクトボックスに表示するデータ内容を宣言しています。
実行結果
最後に
今回紹介したライブラリを使用すれば、簡単にセレクトボックスの複数選択を行うことができます。機会あればぜひ試してみてください。
今後もNuxt.jsでの便利ライブラリについて紹介していけたらと思っています。
それではまた。
《関連記事》
- 【エラー解決方法】Nuxt.js で「error ” is assigned a value but never used no-unused-vars」が発生したときの対処法
- 【エラー解決方法】Nuxt.js で「error Insert
·
prettier/prettier」が発生したときの対処法 - お祝いごとにぴったり! Nuxt.jsプラグイン《アニメーションで紙吹雪を表現》
- 【エラー解決方法】Nuxt.js で「error ” is never reassigned. Use ‘const’ instead prefer-const」が発生したときの対処法
- Vue.jsベースのフレームワーク! Nuxt.jsプラグイン《マウスカーソルの後を追ってくる円のエフェクト》

