'prevent a specific chip to be deleted from combobox

I have these combobox chips with a prob deletable-chips

enter image description here

<v-combobox
    v-model="selectedCategories"
    :items="attributeCategories"
    item-text="name"
    item-value="id"
    label="Category"
    multiple
    chips
    clear-icon="mdi-close-circle"
    deletable-chips
    v-on:change="changeCategory(selectedCategories)"
></v-combobox>

Is there a way to prevent a specific chip to be deleted? For example not show the remove button on a specific one? Let's say for Device and only allow Weather and Geo Location to me removed

vue.jsvuejs2vue-componentvuetify.jscssreactjscolors


Solution 1:[1]

Instead of using in-built delete method of v-chips. You can do the implementation via custom @click:close event. I created a working demo for you :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    model: [],
    items: [
      {
        text: 'Weather'
      },
      {
        text: 'Geo Location'
      },
      {
        text: 'Device'
      }
    ]
  }),
  methods: {
    remove (itemText) {
      if (itemText === 'Device') {
        return;
      } else {
        this.model.forEach(obj => {
          if (obj.text === itemText) {
            this.model.splice(this.model.indexOf(obj), 1)
          }
        })
        this.model = [...this.model]
      }
    }
  }
})
<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"/>
<link rel="stylesheet" href="https://unpkg.com/@mdi/[email protected]/css/materialdesignicons.min.css"/>
<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-combobox
        v-model="model"
        :items="items"
        label="Select"
        multiple
        small-chips
      >
        <template v-slot:selection="{ attrs, item, parent, selected }">
          <v-chip
            v-bind="attrs"
            :input-value="selected"
            close="false"
            @click:close="remove(item.text)"
          >
            <span class="pr-2">
              {{ item.text }}
            </span>
          </v-chip>
        </template>
      </v-combobox>
    </v-container>
  </v-app>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions