如何更改单击 v-autocomplete 的选项项的行为

Question

场景

当点击一个选项时，v-autocomplete（带有 multiple 属性）会自动激活其各自的复选框并保持菜单打开，允许您继续选择其他项目，直到您点击菜单外

Objective

我想要更改此行为，当我仅单击复选框时，会保持本机行为，但是当专门单击该行时，菜单会关闭并使用所选项目。

我认为有必要使用插槽，但我真的不知道如何使用它，或者这是否是获得这种新行为的最佳方式。

备注

垂直线仅用于概念演示目的，没有必要在组件中包含此线。

Answer 1

如您所说，您可以使用插槽来实现。这个想法是覆盖项目显示以删除下面的可点击 v-list-item。缺点是您必须重新实现值选择。

您需要一个复选框和两个方法：isSelected 和 toggleItem。

模板部分：

<v-autocomplete
    v-model="values"
    :items="items"
    outlined
    dense
    chips
    small-chips
    label="Outlined"
    multiple
>
    <template #item="{ item }">
        <v-list-item class="d-flex">
            <div>
                <v-simple-checkbox color="primary" :value="isSelected(item)" @click="toggleItem(item)" />
            </div>
            <div class="ml-2">{{ item }}</div>
        </v-list-item>
    </template>
</v-autocomplete>

脚本部分：

  data: () => ({
    items: ['foo', 'bar', 'fizz', 'buzz'],
    values: ['foo', 'bar'],
  }),
  methods: {
    isSelected(item) {
      return this.values.includes(item);
    },
    toggleItem(item) {
      if (this.values.includes(item)) {
        this.values = this.values.filter(v => v !== item);
      } else {
        this.values.push(item);
      }
    }
  }

请看看这个working example。

如何更改单击 v-autocomplete 的选项项的行为

How to change the behavior of clicking an option item of v-autocomplete

vue.js

vue-component

vuetify.js