コンボボックス (Combobox): v-combobox
複数の項目の中から、ひとつの項目を選択するために使われるコンポーネントです。セレクト v-select
に似ていますが、選択肢として用意されていない文字列でも、ユーザが直接キーボードなどで入力できる点が異なります。
セレクトv-select
とテキストフィールド v-textfield
の両方の機能を足したようなコンポーネントです。コンポーネントの設定に関しては、セレクトとテキストフィールドの両方の設定の多くをそのまま使えます。
基本
選択肢から選ぶインタフェースの部分は v-select
とほぼ同じです。選択肢にない文字列を入力したいときは、コンボボックスの上で直接入力できます。入力した文字列が、選択肢のいずれかの項目と一致するときは、一致する候補が表示されます。
ユーザが選択したか入力した値は v-model
で取得できます。
<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"
などとして幅を設定します。
コード:
<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 でコンポーネントの見た目(スタイル)を選べます。
<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
と同じです。セレクトの項目を参照してください。