3

I would like a vuetify control where user can see and delete chips but not add any more chips.
The <v-select> component matches 99% of the requirements, except it has dropdown. How can I remove the dropdown from v-select (or achieve the goal with other componet)?

<v-select :label="Tags"
            v-model="tags"
            :items="tags"
            multiple chips deletable-chips
            hide-selected disable-lookup>
    <template slot="no-data">
        <div></div>
    </template>
</v-select>

I have tried setting v-model == items with hide-selected. However contrary to v-combobox there no hide-no-data prop on v-select so it still displays dropdown with "No data available" . While adding no-data slot with empty template hides the text but not the dropdown.
Using v-combobox instead does not seem to be an option because the search/input field on v-combobox cannot be disabled neither. There is a prop disable-lookup on both components but it does not seem to do anything, certainly not disabling lookup. There is readonly prop on v-combobox that disables search input but it is not compatible with deletable-chips.

wondra
  • 3,271
  • 3
  • 29
  • 48
  • Update: in the end, rewriting `v-combobox` was easier: while it is no longer possible use `chips`, it is possible to implement own chips by overriding the `v-selection` slot. – wondra Sep 05 '22 at 10:06

0 Answers0