Chapter 33無料公開

コンボボックス (Combobox): v-combobox

超Lチカ団編集局
超Lチカ団編集局
2023.10.09に更新

コンボボックス (Combobox): v-combobox

複数の項目の中から、ひとつの項目を選択するために使われるコンポーネントです。セレクト v-select に似ていますが、選択肢として用意されていない文字列でも、ユーザが直接キーボードなどで入力できる点が異なります。

セレクトv-select とテキストフィールド v-textfield の両方の機能を足したようなコンポーネントです。コンポーネントの設定に関しては、セレクトとテキストフィールドの両方の設定の多くをそのまま使えます。

基本

選択肢から選ぶインタフェースの部分は v-select とほぼ同じです。選択肢にない文字列を入力したいときは、コンボボックスの上で直接入力できます。入力した文字列が、選択肢のいずれかの項目と一致するときは、一致する候補が表示されます。

ユーザが選択したか入力した値は v-model で取得できます。

sample.gif

<template>
  <v-container >
    <v-combobox
      label="Combobox"
      v-model="combo"
      :items="['大阪', '東京', '福岡', '仙台', '札幌', '名古屋']"
    ></v-combobox>
    <div>{{ combo }}</div>
  </v-container>
</template>
<script>
export default {
  data () {
    return {
      combo: ''
    }
  },
}
</script>

幅を制限する(横に並べる)

v-combobox は block 要素なので、デフォルトでは画面幅いっぱいに広がります。横幅を制限したいときは width を指定できる v-sheet などの中に配置するか v-col などを使うか、class="w-50" などとして幅を設定します。

sample2.gif

コード:

<template>
  <v-container>
    <v-combobox :items="itemdata" label="w-50" class="w-50"></v-combobox>
    <v-combobox :items="itemdata" label="w-75" class="w-75"></v-combobox>
    <v-sheet class="w-50">
      <v-combobox :items="itemdata" label="v-sheet / w-50"></v-combobox>
    </v-sheet>
    
  </v-container>
</template>
<script>
export default {
  data: () => ({
    itemdata: [
      'Tokyo','Osaka','kyoto','Aichi','Fukuoka','Sendai','Sapporo','Hiroshima'],
  })
}
</script>

見かけ(スタイル)を変える

variant prop でコンポーネントの見た目(スタイル)を選べます。

sample.gif

<template>
  <v-container>
    <v-row>
      <v-col cols="6">
      <v-combobox
        :items="itemdata" label="default" class="mx-2"></v-combobox>
      </v-col>
      <v-col cols="6">
      <v-combobox variant="outlined"
        :items="itemdata" label="outlined" class="mx-2"></v-combobox>
      </v-col>
      <v-col cols="6">
      <v-combobox variant="solo"
        :items="itemdata" label="solo" class="mx-2"></v-combobox>
      </v-col>
      <v-col cols="6">
      <v-combobox variant="solo-filled" v-model="selected"
        :items="itemdata" label="solo-filled" class="mx-2"></v-combobox>
      </v-col>
      <v-col cols="6">
      <v-combobox variant="solo-inverted" v-model="selected2"
      :items="itemdata" label="solo-inverted" class="mx-2"></v-combobox>
      </v-col>
    </v-row>
   </v-container>
</template>
<script>
export default {
  data: () => ({
    itemdata: [
      'Tokyo','Osaka','kyoto','Aichi','Fukuoka','Sendai','Sapporo','Hiroshima'],
  })
}
</script>

その他

コンボボックスの外観に関するほとんどの設定は、セレクト v-select と同じです。セレクトの項目を参照してください。