vuetify v-select chip unselect on click

Question

所以我有这个 v-select:

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

我想添加点击 v-chip 将其从选定列表中删除的行为。

有人可以帮忙吗？我检查了文档，但没有关于此用例的属性和事件。

感谢您的帮助

Answer 1

v-selecthttps://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>