【概要】

Nuxt.jsにvue-selectをインストールし、フォームのサジェスト機能を作成します。

このvue-selectを使用する事でサジェストに存在する値のみ入力可能にする事も可能です。

【詳細】

1. vue-selectをインストールする

npm install vue-select

2. Vueファイルに設定をする

Nuxt.jsのVueファイルに設定をします。

・設定例

<template>
  <div>
  <h1>パン選択</h1>
    <b-container fluid>
      <b-form @submit="onSubmit">
        <b-form-group label="パン:" label-for="bread" class="text-left">
        <v-select id="bread" v-model="form.bread" :options="breadList" placeholder="パン" required />
      </b-form>
    </b-container>
  </div>
</template>

<script>
import vSelect from 'vue-select';
import 'vue-select/dist/vue-select.css';

export default {
  components: {
    vSelect
  },
  data() {
    form: {bread: ''},
    breadList: ['アンパン', 'カレーパン', 'メロンパン'],
  }
},
</script>

・表示サンプル

Cf. タグ設定

公式：Vue Select API > Props

以下のようなタグを設定したとします。

<v-select id="bread" v-model="form.bread" :options="breadList" @input="changeBread" :clearable="false" required />

上記のサンプルとは違う点は2つです。

1. フォームの値が変更された時に実行するメソッド定義

2. フォームの値を削除不可にする（常時いずれかの値が設定されている事）

1は「@input」によって設定できます。

2は「clearable="false"」によって設定できます。

その他の設定に関しては下記の公式ページを参考にしてみて下さい。

Nuxt.jsでvue-selectを使用する