vuetify v-select chip unselect on click

Question

So I have this v-select:

        <v-select
          v-model="myModel"
          label="My Label"
          :items="items"
          multiple
          chips
        ></v-select>

I would like to add the behavior that clicking on a v-chip removes it from the selected list.

Can anyone help on that? I checked the documentation, but there is not attribute nor events regarding this use case.

Thanks for the help

Answer 1

There is selection slot in v-select https://vuetifyjs.com/en/api/v-select/#slots

const vuetifyOptions = {}
    Vue.use(Vuetify)

    new Vue({
        el: '#app',
        vuetify: new Vuetify(vuetifyOptions),
        data: () => ({
          myModel: [],
          items: [
          "https://picsum.photos/200/200",
          "https://picsum.photos/300/200",
          "https://picsum.photos/250/200"
        ],
           
        }),
        methods: {
          deleteItem(item) {
            this.myModel = this.myModel.filter(find => find !== item);
          }
        },
    })

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"/>

<div id="app">
  <v-app>
    <v-select
          v-model="myModel"
          label="My Label"
          :items="items"
          multiple
          chips
        >
      <template #selection="selection">
        <v-chip @click="deleteItem(selection.item)" v-text="selection.item"></v-chip>
      </template>      
      
    </v-select>
  </v-app>
</div>