I have a combobox:

<v-combobox
    v-model="selectedCategories"
    :items="attributeCategories"
    item-text="name"
    item-value="id"
    label="Category"
    multiple
    chips
    v-on:blur="changeCategory(selectedCategories)"
></v-combobox>

It's rendered like this:

I would like to add an x on each badge, so I can quickly remove it.

Is there a setting that I need to turn on?

In regular input type text, I can just add these props

• clear-icon="mdi-close-circle"
• clearable

CodePudding user response：

The VComboBox's selection slot enables customizing the rendering of the selections. You could add a VChip with a VIcon child that re-selects the item when clicked (thus toggling its selection, and removing the chip):

<v-combobox ⋯ chips>
  <template v-slot:selection="{ attrs, item, parent, selected }">
    <v-chip v-bind="attrs" :input-value="selected">
      <span >
        {{ item.name }}
      </span>
      <v-icon small @click="parent.selectItem(item)"> $delete </v-icon>
    </v-chip>
  </template>
</v-combobox>

demo

CodePudding user response：

You can simply achieve that by adding the <v-icon> inside <v-chip> in the <v-slot> template. I just created the working demo with the same data set you have in the screenshot mentioned above.

Demo :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: ['Weather', 'Geo Location', 'Device', 'Date and Time', 'Product'],
    model: ['Weather', 'Geo Location', 'Device', 'Date and Time', 'Product']
  })
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css"/>
<div id="app">
<link rel="stylesheet" href="https://unpkg.com/@mdi/[email protected]/css/materialdesignicons.min.css"/>
<v-app id="inspire">
  <v-container fluid>
    <v-combobox
      v-model="model"
      :items="items"
      label="Category"
      multiple
      small-chips
    >
      <template v-slot:selection="{ item, parent }">
        <v-chip
          label
          small
        >
          <span >
            {{ item }}
          </span>
          <v-icon
            small
            @click="parent.selectItem(item)"
          >
            $delete
          </v-icon>
        </v-chip>
      </template>
    </v-combobox>
  </v-container>
</v-app>
</div>