【Vue.js】Vue Selectでリストに候補がない時の「Sorry, no matching options.」を変更する

vue-selectで入力した時に、リストに候補がない場合に表示される「Sorry, no matching options.」を設定する方法です。

slotを使う

      <v-select :options="prefectures" v-model="selected" label="name" :reduce="options => options.id">
        <span slot="no-options">検索候補がありません</span>
      </v-select>

v-selectの間にslot="no-options" を追記し、任意の文を設定することができます。

参考

• Vue Select - Improving the default no-options text

入力前と入力後で違う内容を表示したり、入力した文字をメッセージに反映させることもできます。