Nuxt.jsでvue-selectを使用する
【概要】Nuxt.jsにvue-selectをインストールし、フォームのサジェスト機能を作成します。このvue-selectを使用する事でサジェストに存在する値のみ入力可能にする事も可能です。【詳細】1. vue-selectをインストールするnpm install vue-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;v-select id"bread" v-model"form.bread" :options"breadList" placeholder"パン" required / lt;/b-form lt;/b-container lt;/divlt;/templatelt;scriptimport vSelect from 'vue-select';import 'vue-select/dist/vue-select.css';export default { components: { vSelect }, data() { form: {bread: ''}, breadList: ['アンパン', 'カレーパン', 'メロンパン'], }},lt;/script・表示サンプルCf. タグ設定公式:Vue Select API Props以下のようなタグを設定したとします。lt;v-select id"bread" v-model"form.bread" :options"breadList" @input"changeBread" :clearable"false" required /上記のサンプルとは違う点は2つです。1. フォームの値が変更された時に実行するメソッド定義2. フォームの値を削除不可にする(常時いずれかの値が設定されている事)1は「@input」によって設定できます。2は「clearable"false"」によって設定できます。その他の設定に関しては下記の公式ページを参考にしてみて下さい。