单击芯片时如何防止v-autocomplete打开下拉抽屉答案

【问题标题】：How to prevent v-autocomplete from opening the dropdown drawer when clicking on a chip单击芯片时如何防止v-autocomplete打开下拉抽屉
【发布时间】：2020-03-07 12:46:27
【问题描述】：

我正在使用 VueJS + Vuetify 构建一个应用程序，并使用“v-autocomplete”作为多选下拉菜单。但是，当我单击删除项目时，我找不到阻止下拉抽屉打开的方法。

Codepen 示例： https://codepen.io/rafacarneiro/pen/abOVEzw?editable=true&editors=101

移除项目时使用的代码：

<v-chip
   v-bind="data.attrs"
   :input-value="data.selected"
   close
   @click="data.select"
   @click:close="remove(data.item)"
>

当前行为：当单击所选项目上的“X”图标时，该项目会被移除，但下拉抽屉会同时打开。我想在移除项目时阻止这种行为，但我一直在努力寻找一种方法来做到这一点。

【问题讨论】：

我尝试使用stop 没有成功

标签： vue.js vue-component vuetify.js

【解决方案1】：

看起来几乎像：How to stop select from opening when closing chip in vuetify?

如果您从 v-autocomplete 中删除 filled 属性，它将起作用。

【讨论】：

问题是，如果我们添加一些其他的样式道具（如“solo”和/或“outlined”），即使没有填充道具，它也无法工作。我现在已经更新了 Codepen。

【解决方案2】：

@click.stop 应该可以胜任

【讨论】：