Nuxt.jsでvue-cool-selectを使用してフォームのサジェスト機能を作成する
【概要】Nuxt.jsにvue-cool-selectをインストールし、フォームのサジェスト機能を作成します。【詳細】1. vue-cool-selectをインストールするnpm install --save vue-cool-select2. Vueファイルに設定をするNuxt.jsのVueファイルに設定をします。・設定例lt;template lt;div lt;h1パン選択lt;/h1 lt;b-container fluid lt;b-form @submit"onSubmit" lt;b-form-group label"パン:" label-for"bread" class"text-left" lt;cool-select id"bread" v-model"form.bread" :items"bread" :placeholder"form.bread" required / lt;/b-form-group lt;b-button type"submit" variant"primary" class"mt-2"Submitlt;/b-button lt;/b-form lt;/b-container lt;/divlt;/templatelt;scriptimport { CoolSelect } from "vue-cool-select";import("vue-cool-select/dist/themes/bootstrap.css");export default { components: { CoolSelect }, data() { form: {bread: ''}, bread: ['アンパン', 'カレーパン', 'メロンパン'], }},lt;/script・表示サンプル[設定概要]・サジェストリストdata部分で定義しているbreadの配列をcool-selectタグのitemsに渡す事でサジェストにパンのリストが表示されます。・vue-cool-selectをインポートimport { CoolSelect } from "vue-cool-select";import("vue-cool-select/dist/themes/bootstrap.css");ここではBootstrap Vueを使用している事を想定していますが、その他のCSSを使用している場合は下記をインポートする事でCSSが反映されます。import("vue-cool-select/dist/themes/material-design.css");・vue-cool-selectのComponentを設定するcomponents: { CoolSelect},
